day58 BOM操作和DOM操作案例

最新推荐文章于 2024-01-31 11:36:50 发布
最新推荐文章于 2024-01-31 11:36:50 发布
阅读量162 收藏
点赞数
分类专栏： python从入门到到高阶 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyurainzi/article/details/108783732
版权

目录

模态框案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .box1{
             position: absolute;
             left:0;
             right: 0;
             top: 0;
             bottom: 0;
             background-color: darkgray;
         }

        .box2{
            width: 500px;
            height: 500px;
            background-color: white;
            /*margin: auto;*/
            /*margin-top: 100px;*/
            position: absolute;
            top: 100px;
            left:50%;
            margin-left: -250px;

            text-align: center;
            line-height: 500px;
            color: red;
        }

        .box3{
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: #ec6357;
            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')
        box3.innerText='X'
        box2.innerText='弹出的模态框'

        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)   //将box1添加到文档中

        box3.onclick=function () {
            body.removeChild(box1)

        }




    }


</script>
</body>
</html>

模态框扩展案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .box1{
             position: absolute;
             left:0;
             right: 0;
             top: 0;
             bottom: 0;
             background-color: darkgray;
             display:none /*box1元素不显示，也不占位置了 */
         }

        .box2{
            width: 500px;
            height: 500px;
            background-color: white;
            /*margin: auto;*/
            /*margin-top: 100px;*/
            position: absolute;
            top: 100px;
            left:50%;
            margin-left: -250px;
            /*text-align: center;*/
            color: red;
        }

        .box3{
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: #ec6357;
            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' //box1显示为块级模块
    }
     var box3=document.getElementsByClassName('box3')[0]
     box3.onclick=function () {
        box1.style.display='none'
         document.getElementsByName('username')[0].value=''
         document.getElementsByName('password')[0].value=''

        console.log(div.box2.username,div.box2.password)
     }


</script>
</body>
</html>

点击有惊喜案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #ec6357;
            margin: auto;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: #f5ff21;
        }
    </style>


</head>
<body>
<div class="box">
    点击有惊喜！
</div>
<script>
    var box=document.getElementsByClassName('box')[0]
    var count=0
    box.οnclick=function () {
        count++
        if (count % 4==1){
            this.style.backgroundColor='blue'
            this.innerText='继续点击!'
        }else if(count%4==2)
            {
            this.style.backgroundColor='pink'
            this.innerText='精彩即将揭晓'
        }else if(count%4==3)
            {
            this.style.backgroundColor='green'
            this.innerText='骗你的傻逼'
        }else
            {
            this.style.backgroundColor='red'
            this.innerText='点击有惊喜！'
        }

    }
</script>
</body>
</html>

简易评论框案例

<!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:yellow;
            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;'+d.toLocaleString()+'&nbsp;&nbsp;&nbsp;'+'<span class="del">删除</span>'

        //处理评论内容

          p2.innerText=val
          // alert(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>

简易评论框改进案例

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

选项卡案例

<!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>
xiaoyurainzi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1+X考试课程（十二）DOM和BOM操作
weixin_45166354的博客
10-09 317
这里只介绍DOM对象和BOM对象的常用用法 DOMBOMnavigatorscreenhistorylocation弹出框警告框确认框提示框案例：定时器 DOM document对象的节点操作 方法 意义 write() 可以把任意字符插入到文本中 createElement() 创建一个元素节点 appendChild() 添加一个新的节点到某个已知节点的末尾 cr...
关于JavaScript的DOM和BOM简单案例
AtlantisChina
10-12 671
使用JavaScript来实现电灯开关、轮播图、自动跳转首页、动态表格、表格选择、表单验证等案例效果。
js干货-Bom，Dom事件及各种案例
weixin_42881232的博客
07-09 382
BOM : 浏览器的一窗口 window 对象 不同的窗口不共享 window 实际上全局变量的和全局函数都属于window对象的自定义属性和方法 window 对象的属性 navigator 浏览器的相关信息 userAgent(字符串) 可以用于判断用户登录的设备 history 访问历史记录 length 这个窗口打开过几个页面 back() 回退一步 forward() 前进一步 go(-1/1/2) location 地址栏 host 主机+端口号 www.jd.com:8
网页设计（十二）DOM与BOM应用案例
最新发布
.正函数.的博客
01-31 1457
DOM与BOM应用案例
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）
数字世界 万物互联
05-21 854
上一博文种讲解了JavaScript基础的ECMAScript，包括基本语法和部分对象，本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件，后文中有对应的实战练习。 1、DOM简单学习 DOM是用来控制html文档的内容的： 1）document.getElementById("id值")：通过元素id获取元素对象Element。 2）操作Element对象： 修改属性值：要明确获取的对象是哪一个，再查看API，找其中有哪些属性可以设置； 修改标签体内容：通过属性in...
day048&049 JavaScript之BOM和DOM（属性操作，节点操作）
weixin_30336061的博客
12-25 272
本节内容： 1、BOM（browser object model） 2、DOM(document object model) 2.1 文档树 2.2 DOM对象 2.3 查找标签 2.4 标签控制 一、BOM对象 1、window对象 所有浏览器都支持 window 对象。 概念上讲:一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲:...
day4 DOM，BOM
哎呀妈呀脑壳疼脑壳疼
11-09 96
day4 DOM，BOM 1.     BOM编程 1.1. BOM编程基础     全称 Browser Object Model，浏览器对象模型。     JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。     为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得...
JavaScript操作DOM对象 Day05
01-08
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构！ 获取Dom节点：得到Dom节点 更新：更新Dom节点 添加：添加一个新的节点 删除：删除一个Dom节点 要操作一个Dom节点，就必须要先获得这个Dom节点。 1 ...
DAY04_BOM和DOM（上）.md
11-03
DAY04_BOM和DOM（上）.md
DAY09：BOM和DOM（上）.html
09-07
DAY09：BOM和DOM（上）
Linux操作系统day01.pdf
03-28
Linux操作系统day01.pdf Linux操作系统是当今最流行的操作系统之一，本章节主要介绍Linux操作系统的基本概念和命令操作。 1. Linux字符界面 Linux操作系统提供了两种基本的用户界面：字符界面和图形界面。字符...
DAY15：DOM高级操作.html
09-07
DAY15：DOM高级操作
JavaScript-4.5-BOM 与 DOM-案例
QWH_PYTHON的博客
11-13 409
JavaScript-4.5-BOM 与 DOM-案例案例一：简单的留言板 案例 一：简单的留言板 输入昵称和评论内容，单击“提交内容”按钮，可以将最新的评论插入到已有评论的下方 昵称和评论内容为空时，不能提交 提交后获取当前时间 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
python 获取复数的实部和虚部
xiaoyurainzi的博客
07-19 8125
python获取复数的实部和虚部。
Chrome浏览器关闭页面底部的下载栏
xiaoyurainzi的博客
10-26 3577
Chrome浏览器关闭页面底部的下载栏
day75 中间件
xiaoyurainzi的博客
10-23 2322
文章目录昨日回顾今日内容1 django的session原理流程2 中间件2.1 什么是中间件2.2 中间件有什么用2.3 自定义中间件process_request和process_responseprocess_viewprocess_exceptionprocess_template_response(self,request,response)2.4 中间件应用场景1 做IP访问频率限制2 URL访问过滤2.5 CSRF_TOKEN跨站请求伪造在form表单中应用：在Ajax中应用：放在data里
python os遍历文件夹
xiaoyurainzi的博客
08-09 1997
python os遍历文件夹
macos安装管理多版本的python
xiaoyurainzi的博客
10-21 1762
Mac 安装管理多个版本的python
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值