day58 模态框 简易评论框 选项卡

其他 2020-10-29 11:56:59 阅读次数: 0 
上节课复习：
    1、BOM操作
    window.history

    window.location.href="url地址"
    window.location.reload()
    var t1=setTimout(函数,毫秒数)  # 执行一次
    var t2=setInterval(函数,毫秒数)  # 循环执行
    clearTimeout(t2)
    clearInterval(t2)

    alert("弹窗")
    console.log("终端打印")

    2、DOM操作
        2.1 查找：
            直接找
                window.document.getElementById()
                window.document.getElementsByClassName()[索引值]
                window.document.getElementsByTagName()[索引值]
                window.document.getElementsByName()[索引值]

            间接找
                # 包含文本
                window.document.getElementById().childNodes()
                window.document.getElementById().firstChild()
                window.document.getElementById().lastChild()
                window.document.getElementById().parentNode()
                window.document.getElementById().nextSibling()
                window.document.getElementById().previousSibling()

                # 不包含文本，找的是标签
                window.document.getElementById().children()
                window.document.getElementById().parentNode()


        2.2 新增标签
            # （1）创造了一个标签，此刻并未存在于文档树中
            var p=document.createElement("p")


            # （2）把新建出来的p标签添加文档中0
            var somenode=document.getElementById("#xxx")
            var mmm=document.getElementById("#yyy")

            somenode.appendChild(p)  # 把p标签添加somenode标签子元素的最后

            somenode.insertBefore(p,mmm) # 把p标签添加somenode标签的mmm子元素的前面

            somenode.removeChild(要删除的子节点)；
            somenode.replaceChild(新的子节点, 某个子节点);

       2.3 修改元素的属性
            #1、获取文本节点的值：
            var divEle = document.getElementById("d1")
            divEle.innerText
            divEle.innerHTML

            #2、设置文本节点的值：
            var divEle = document.getElementById("d1")
            divEle.innerText="1"
            divEle.innerHTML="<p>2</p>"

            #3、attribute操作
            var divEle = document.getElementById("d1");
            divEle.setAttribute("age","18")
            divEle.getAttribute("age")
            divEle.removeAttribute("age")

            #4、自带的属性还可以直接.属性名来获取和设置
            imgEle.src
            imgEle.src="..."

            元素.value

       2.4 class操作
            标签.classList.add()
            标签.classList.remove()
            标签.classList.contains()
            标签.classList.toggle()  # 有则删除，没有则添加

       2.5 css操作
            标签.style.fontSize="10px"  # css的font-size改成fontSize

       2.6 事件
            绑定事件
            标签.onclick=function() {
    
    
                this // 代表的就是标签本身
            }


今日内容：
    1、js练习题
    2、jquery

01.模态框

<!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>

02.模态框扩展

<!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>

03.点击有惊喜

<!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>

04.简易评论框

<!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>

05.简易评论框改进

<!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>

06.选项卡

<!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>

p1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>11111</p>
<input type="text">
<a href="p2.html">点击进入下一页</a>
</body>
</html>

p2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>222222</p>
<a href="p3.html">点击进入下一页</a>
</body>
</html>

p3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>3333</p>
<input type="button" value="回退" id="btn">
<script>
    document.getElementById("btn").onclick=function () {
     
     
        window.history.back()
    }
</script>
</body>
</html>

test.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
        }
        .tab {
     
     
            width: 480px;
            height: 200px;
            border: 1px solid red;
            margin: 0 auto;
        }

        ul li {
     
     
            list-style: none;
            width: 160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #b0b0b0;
            float: left;
        }

        li.active {
     
     
            background-color: #55BBBB;
        }
        p {
     
     
            display: none;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: white;
        }
        p.active {
     
     
            display: block;
        }
    </style>
</head>
<body>
<div class="tab">
    <ul>
        <li class="active">首页</li>
        <li>新闻</li>
        <li>图片</li>
    </ul>
    <p class="active">首页内容</p>
    <p>新闻内容</p>
    <p>图片内容</p>
</div>
<script>
    var aLi=document.getElementsByTagName('li');
    var aP=document.getElementsByTagName('p');
    for (var i=0;i<aLi.length;i++){
     
     
        aLi[i].index=i;
        aLi[i].onclick=function () {
     
     
            for (var j=0;j<aLi.length;j++){
     
     
                aLi[j].className='';
                aP[j].className='';
            }
            this.className='active';
            aP[this.index].className='active';
        }
    }
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/yinlingjishu/article/details/109050394
今日推荐
周排行
django中south支持多数据库
2、实时同步项目
http协议状态码解析
codeup 又一版 A+B(C++)
js三座大山之外的其他知识点
正向代理VS反向代理 总结
规范的测试流程 （转自51testing）
3、python-连接sql server
转~Jenkins pipeline：pipeline 使用之语法详解
cookie与sessio系列（一）：基本知识入门
每日归档
更多
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022