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

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 {
             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;
             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 {
             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;
             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 {
             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;
             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;
             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 {
             600px;
            height: 400px;
            border: 1px solid red;
            margin: auto;

        }

        ul > li {
            list-style: none;
             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;
             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>

相关阅读:
Python入门日志打印
 Python入门面向对象
 Python入门更换pip源的方法
 Python入门模块
 Python入门函数式编程
 四月份该做的事情
 Docker入门配置篇
 Python入门序列章
 Python入门值内存管理与所有的关键字
 论操作系统的IO
原文地址：https://www.cnblogs.com/usherwang/p/14012930.html