前端之JavaScript练习等相关内容-58

时间：2020-11-24 13:02:51 阅读：19 评论：0 收藏：0 [点我收藏+]

标签：active creat button ntb length attribute remove current 密码

JavaScript练习

1.模态框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #f6c2d2;
        }
?
        .box2 {
            width: 500px;
            height: 500px;
            background-color: white;
            /*margin: 0 auto;*/
            /*margin-top: 100px;*/
?
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -250px;
?
            text-align: center;
            line-height: 500px;
            color: red;
        }
?
        .box3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 50px;
?
        }
    </style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<script>
    var btn = document.getElementById("btn")
    btn.onclick = function () {
        // alert(123)
        var box1 = document.createElement("div")
        var box2 = document.createElement("div")
        var box3 = document.createElement("div")
?
        box2.innerText = "弹出的模态框"
        box3.innerText = "X"
?
?
        box1.classList.add("box1")
        box2.classList.add("box2")
        box3.classList.add("box3")
?
        box1.appendChild(box2)
        box2.appendChild(box3)
?
        var body = document.getElementsByTagName(‘body‘)[0]
        body.appendChild(box1)
?
?
        box3.onclick = function () {
            body.removeChild(box1)
        }
    }
?
</script>
</body>
</html>

2.模态框拓展

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #f6c2d2;
            display: none;
        }
?
        .box2 {
            width: 500px;
            height: 500px;
            background-color: white;
            /*margin: 0 auto;*/
            /*margin-top: 100px;*/
?
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -250px;
?
            color: red;
        }
?
        .box3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 50px;
?
        }
    </style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<div class="box1">
    <div class="box2">
        <form action="">
            <p>
                用户名：<input type="text" name="username">
            </p>
            <p>
                密码：<input type="text" name="password">
            </p>
            <p>
                <input type="button" value="提交">
            </p>
        </form>
        <div class="box3">X</div>
    </div>
</div>
<script>
    var btn = document.getElementById("btn")
    var box1 = document.getElementsByClassName(‘box1‘)[0]
?
    btn.onclick = function () {
        box1.style.display = "block"
    }
?
    var box3 = document.getElementsByClassName(‘box3‘)[0]
    box3.onclick = function () {
        box1.style.display = "none"
        document.getElementsByName("username")[0].value = ""
        document.getElementsByName("password")[0].value = ""
    }
</script>
</body>
</html>

3.点我有惊喜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: auto;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: white;
        }
    </style>
</head>
<body>
<div class="box">
    点击有惊喜！
</div>
<script>
    var box = document.getElementsByClassName("box")[0]
    var count = 0
    box.onclick = function () {
        count++
        if (count % 4 == 1) {
            this.style.backgroundColor = "green"
            this.innerText = "继续点击！"
        } else if (count % 4 == 2) {
            this.style.backgroundColor = "yellow"
            this.innerText = "精彩即将揭晓"
?
        } else if (count % 4 == 3) {
            this.style.backgroundColor = "pink"
            this.innerText = "骗你的傻逼"
?
        } else {
            this.style.backgroundColor = "red"
            this.innerText = "点击有惊喜！"
            // count=0
?
        }
?
    }
</script>
</body>
</html>

4.简易评论框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            background-color: #f6c2d2;
            width: 600px;
        }
?
        ul > li {
            list-style: none;
            background-color: #f5deb3;
            border: 1px dotted black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>评论区：</p>
    <ul></ul>
</div>
<div class="box2">
    <p>留言内容</p>
    <textarea name="" id="content" cols="30" rows="10"></textarea>
    <p>
        <input type="button" value="提交" id="btn">
        <input type="button" value="统计" id="cal">
    </p>
</div>
?
<script>
    var btn = document.getElementById("btn")
    var count = 0
    btn.onclick = function () {
        var content = document.getElementById("content")  // 评论框
        var val = content.value
?
        if (val.length != 0) {
            var ul = document.getElementsByTagName("ul")[0]  // ul表，用于盛放li标签
?
            var li = document.createElement("li")  // 造了一个li标签，li标签里放评论的内容
?
            var p1 = document.createElement("p") // 楼层信息
            var p2 = document.createElement("p") // 评论内容
?
            // 处理楼层信息
            count = document.getElementsByTagName("li").length + 1
            var d = new Date()
            p1.innerHTML = "#" + count + "楼" + "&nbsp;&nbsp;&nbsp;&nbsp;" + d.toLocaleString() + "&nbsp;&nbsp;&nbsp;&nbsp;" + "<span class=‘del‘>删除</span>"
?
            // 处理评论内容
            p2.innerText = val
?
            // 把p1、p2放入li
            li.appendChild(p1)
            li.appendChild(p2)
?
            // 往ul里添加li，并清除评论框的内容
            ul.appendChild(li)
            content.value = ""
?
            var delButtons = document.getElementsByClassName("del")
            var currentButton = delButtons[delButtons.length - 1]
            // alert(currentButton)
            currentButton.onclick = function () {
                // console.log(123123213)
                ul.removeChild(this.parentNode.parentNode)
            }
?
        }
?
    }
?
?
</script>
</body>
</html>

5.简易评论框改进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            background-color: #f6c2d2;
            width: 600px;
        }
?
        ul > li {
            list-style: none;
            background-color: #f5deb3;
            border: 1px dotted black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>评论区：</p>
    <ul></ul>
</div>
<div class="box2">
    <p>留言内容</p>
    <textarea name="" id="content" cols="30" rows="10"></textarea>
    <p>
        <input type="button" value="提交" id="btn">
        <input type="button" value="统计" id="cal">
    </p>
</div>
?
<script>
    var btn = document.getElementById("btn")
    var count = 0
    btn.onclick = function () {
        var content = document.getElementById("content")  // 评论框
        var val = content.value
?
        if (val.length != 0) {
            var ul = document.getElementsByTagName("ul")[0]  // ul表，用于盛放li标签
?
            var li = document.createElement("li")  // 造了一个li标签，li标签里放评论的内容
?
            var p1 = document.createElement("p") // 楼层信息
            var p2 = document.createElement("p") // 评论内容
?
            // 处理楼层信息
            count = document.getElementsByTagName("li").length + 1
            var d = new Date()
            p1.innerHTML = "#" + "<span class=‘num‘>" + count + "</span>" + "楼" + "&nbsp;&nbsp;&nbsp;&nbsp;" + d.toLocaleString() + "&nbsp;&nbsp;&nbsp;&nbsp;" + "<span class=‘del‘>删除</span>"
?
            // 处理评论内容
            p2.innerText = val
?
            // 把p1、p2放入li
            li.appendChild(p1)
            li.appendChild(p2)
?
            // 往ul里添加li，并清除评论框的内容
            ul.appendChild(li)
            content.value = ""
?
            var delButtons = document.getElementsByClassName("del")
            var currentButton = delButtons[delButtons.length - 1]
            // alert(currentButton)
?
            currentButton.onclick = function () {
                // console.log(123123213)
?
?
                // 把后面的楼层都减1
                var allNum = document.getElementsByClassName("num")
                var currntNum = this.previousElementSibling
?
?
                for (var i = 0; i < allNum.length; i++) {
                    if (currntNum == allNum[i]) {
                        // alert(i) // 找到当前索引
                        for (var j = i + 1; j < allNum.length; j++) {
                            allNum[j].innerText = parseInt(allNum[j].innerText) - 1
                        }
                        break
                    }
                }
?
?
                ul.removeChild(this.parentNode.parentNode)
                count--
?
            }
?
        }
?
    }
?
?
</script>
</body>
</html>

6.选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
?
        .box {
            width: 600px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
?
        }
?
        ul > li {
            list-style: none;
            width: 200px;
            height: 80px;
            background-color: gray;
            text-align: center;
            line-height: 80px;
            float: left;
        }
?
        ul:after {
            display: table;
            content: "";
            clear: both;
        }
?
        .content {
            background-color: #f6c2d2;
            width: 600px;
            height: 320px;
            display: none;
        }
?
        li.active {
            background-color: #55bbbb;
        }
?
        div.active {
            display: block;
        }
?
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li class="active">首页</li>
        <li>新闻</li>
        <li>图片</li>
    </ul>
?
    <div class="content active">
        首页内容
    </div>
?
    <div class="content ">
        新闻内容
    </div>
?
    <div class="content">
        图片内容
    </div>
</div>
?
<script>
    var arr = document.getElementsByTagName(‘li‘)
    for (var i = 0; i < arr.length; i++) {
        arr[i].n = i
        arr[i].onclick = function () {
            // alert(this.n)
?
            for (j = 0; j < arr.length; j++) {
                arr[j].classList.remove("active")
                document.getElementsByClassName("content")[j].classList.remove("active")
            }
?
            this.classList.add(‘active‘)
            // document.getElementsByClassName("content")[i].classList.add("active") // 错误的做法
            document.getElementsByClassName("content")[this.n].classList.add("active")
?
?
        }
    }
</script>
</body>
</html>

前端之JavaScript练习等相关内容-58

标签：active creat button ntb length attribute remove current 密码

原文地址：https://www.cnblogs.com/usherwang/p/14012930.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行