Java Script BOM简介到红绿灯实现

最新推荐文章于 2024-10-09 20:10:15 发布

2302_79704390

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量83

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2302_79704390/article/details/134362127

版权

BOM简介

DOM:document object model

           DOM: 文档对象模型,通过document.getElementByXxx()获取HTML文档内部的元素

           BOM: Brower object model
           浏览器器对象模型.可以获取一些浏览器自带的功能

             由于没有统一的BOM标准，每个浏览器都有自己的BOM实现方法，
             BOM的浏览器兼容性较差。常见的BOM对象有：
                 window
                 document
                 location

window对象讲解

<button id="btn">点击我跳转到另外一个页面</button>
       <a href="1_BOM简介.html">点击我跳转到另外一个页面</a>
       <button id="close">退出网页</button>
       <script>
           //window对象是全局对象又称顶级对象.可以省略不写
           //常见的方法:console.log() alert
           // console可以写成window.console。

           // alert()可以写成window.alert()。

           // prompt()可以写成window.prompt()。

           // open()可以写成window. open()。

           // close()可以写成window.close()。

           //open表示开启一个新窗口重新开启一个窗口而a标签是在当前窗口完成覆盖.
           document.getElementById("btn").onclick = function(){
               // window.open("1_BOM简介.html");
               open("1_BOM简介.html");
           }


           //close方法表示直接关闭浏览器
           document.getElementById("close").onclick = function(){
               // window.open("1_BOM简介.html");
               close();
           }

location对象

<button id="btn">点击我跳转页面</button> <br>
       <button id="btn1">点击我获取当前页面的网址</button> <br>
       <button id="btn2">点击我刷新网页</button>

       <script>
           //location对象常用于路径相关的用法

           //常见用法1: 跳转到指定页面等同于A标签的功能
           document.getElementById("btn").onclick = function(){
               location.href = "1_BOM简介.html";
           }

           //常见用法2: 获取当前页面的URL地址
           document.getElementById("btn1").onclick = function(){
               console.log(location.href);
           }




           //客串知识点: 编码和乱码的区别:
           //乱码值得是两个字符串采用的编码不一致,导致数据乱套.
           //数据呈现出无法阅读的字样 .



           //编码:将占据空间较大的汉字转成占据空间较小的字母的编码形式
           //解码:将字母又转回汉字.

           //如何对字符串进行编码解码的操作
           var str = "%E5%AF%B9%E8%B1%A1";
           str = decodeURI(str);//进行解码
           console.log(str);

           var str = "对象";
           str = encodeURI(str);//进行编码
           console.log(str);

           //常见用法3: 刷新当前网页
           document.getElementById("btn2").onclick = function(){
               location.reload();
           }

定时器的基本用法

//定时器: 每间隔多少时间毫秒自动执行函数的一种机制.

           //例如5秒后退出系统例如轮播图每隔1秒进行图片的转变

           //定时器的种类: 分为延时定时器和重复定时器

           //延时定时器: 等待多少时间执行一次函数就GG

           //重复定时器: 每隔多少时间都执行一次函数无限循环除非代码写了关闭的条件

延迟定时器的用法

// 等待多少时间执行一次函数就GG
           //延时定时器的语法如下:
           /*
               1. setTimeout(function(){ 代码块 }, xx); xx毫秒

               2. setTimeout(aa, xx);    注意aa表示函数名不要加括号

                   function aa(){

                   }

           */



       // setTimeout(function(){
           // console.log("你好~~~");
       // },2000)


       // function aa(){
           // console.log("你好~~");
       // }


       // setTimeout(aa,3000);


       setTimeout(function(){
               close();
       },5000)

重复定时器的用法

<button id="btn">点击我停止定时器</button>

       <script>

           //重复定时器: 每隔多少时间都执行一次函数
           //无限循环除非代码写了关闭的条件
           //重复定时器的语法如下:
           /*
               1. setInterval(function(){ 代码块 }, xx); xx毫秒

               2. setInterval(aa, xx);    注意aa表示函数名不要加括号

                   function aa(){

                   }

           */

       // setInterval(function(){
           // console.log("~~");
       // },1000);

       // setInterval(aa,1000);

       // function aa(){
           // console.log("~~~");
       // }



       //如何关闭定时器
       //1.需要先定义定时器的名字
       //2.加上关闭的条件
       //3.通过clearInterval(xxx); xxx表示定时器的名字

       var dsq ; //假设该变量是存储定时器


           dsq = setInterval(function(){
               console.log("~~");
           },1000);


           document.getElementById("btn").onclick = function(){
               clearInterval(dsq);
           }

       </script>

在页面显示当前时间

当前时间为： <span id="sj"></span>

       <script>
           //需求在网页上刷新时间
           var sj = document.getElementById("sj");


           //立刻马上时时刻刻刷新时间
           // setInterval(function(){
           //    var date = new Date();
           //    sj.innerText = date.toLocaleString();
           // },0);


           //先赋予一个初值
           var date = new Date();
           sj.innerText = date.toLocaleString();
           //每秒刷新.
           setInterval(function(){
               var date = new Date();
               sj.innerText = date.toLocaleString();
           },1000);



       </script>

距离新年倒计时

距离2024年还差：
       <span id="d"></span>天
       <span id="h"></span>时
       <span id="m"></span>分
       <span id="s"></span>秒
       <script>
           //需求在网页上刷新倒计时的时间
           var d = document.getElementById("d");
           var h = document.getElementById("h");
           var m = document.getElementById("m");
           var s = document.getElementById("s");




           setInterval(function(){
               //倒计时的本质:两个时间节点的时间差计算出两者相差的时间
               var d1 = new Date();//当前时间
               var d2 = new Date(2024,0,1);//未来时间

               var sjc = d2.getTime() - d1.getTime(); //两个时间节点的时间差

               //此时的jsc是一个毫秒数. 先转成秒
               sjc = Math.ceil(sjc / 1000);//秒数

               s.innerText = sjc%60; //秒

               m.innerText = Math.floor(sjc/60%60);//分

               h.innerText = Math.floor(sjc/60/60%24);//时

               d.innerText = Math.floor(sjc/60/60/24);//天


           },0);






       </script>

点名系统版本

<head>
       <meta charset="utf-8">
       <title></title>
       <style>
           td{
               width: 100px;
               height: 40px;
               border: 1px solid black;
               text-align: center;
           }
       </style>

   </head>
   <body>
       <div align="center">
           <table>
               <tr>
                   <td>张三</td>
                   <td>李四</td>
                   <td>王五</td>
               </tr>
               <tr>
                   <td>赵六</td>
                   <td>雷霆</td>
                   <td>雷霆1号</td>
               </tr>
               <tr>
                   <td>雷霆2号</td>
                   <td>雷霆3号</td>
                   <td>雷霆gaga</td>
               </tr>
           </table>
           <button id="btn">开始点名</button>
       </div>


       <script>
           //思路 :随机数函数获取任意一个单元格然后改变其样式

           var btn = document.getElementById("btn");
           var td = document.getElementsByTagName("td");

           var dsq ;


           btn.onclick = function(){

               if(btn.innerText == "开始点名"){
                   //点击开始了
                   btn.innerText = "停止点名";
                   dsq = setInterval(function(){
                       var sjs =Math.floor(Math.random() * 9); //
                      for(var i = 0 ;i<td.length;i++){
                           td[i].style.backgroundColor = "white";
                       }

                       td[sjs].style.backgroundColor = "pink";

                   },10);
               }else{
                   //点击结束了
                   btn.innerText = "开始点名";
                   clearInterval(dsq);
               }

           }


       </script>
   </body>

点名系统

<p></p>

       <button id="btn">开始点名</button>

       <script>
           var student = ["张三1","张三2","张三3","张三4","张三5","张三6","张三7"];


           var btn = document.getElementById("btn");
           var p = document.getElementsByTagName("p")[0];
           var dsq ;


           btn.onclick = function(){

               if(btn.innerText == "开始点名"){
                   //点击开始了
                   btn.innerText = "停止点名";
                   dsq = setInterval(function(){
                       var sjs =Math.floor(Math.random() * student.length); //
                      p.innerText = student[sjs];
                   },10);
               }else{
                   btn.innerText = "开始点名";
                   clearInterval(dsq);
               }

           }



       </script>

模拟手机验证码

手机号：<input type="text" /><button id="btn">发送</button>
       <script>
           var sj = 5;//倒计时的时间
           var dsq ;

           var btn = document.getElementById("btn");

           btn.onclick = function(){
               btn.setAttribute("disabled" , "disabled");
               btn.innerText = "还剩下" + sj + "秒";

               dsq = setInterval(function(){
                   sj--;
                   btn.innerText = "还剩下" + sj + "秒";
                   if (sj==0) {
                       clearInterval(dsq);
                       btn.removeAttribute("disabled");
                       btn.innerText = "发送";
                       sj=5;
                   }


               },1000)

           }

       </script>

红绿灯实现

<head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #body{
               width: 450px;
               height: 180px;
               background-color: black;
               border-radius: 10%;
           }
           .deng{
               width: 100px;
               height: 100px;
               background-color: floralwhite;
               float: left;
               margin-left: 20px;
               margin-top: 40px;
               border-radius: 100%;
           }

           #sj{
               color: white ;
               margin-left: 20px;
               margin-top: 58px;
               border-radius: 100%;
               float: left;
               font-size: 40px;
           }

       </style>
   </head>
   <body>
       <div id="body">
           <div class="deng" id="red" style="background-color: red;" ></div>
           <div class="deng" id="yellow"></div>
           <div class="deng" id="green"></div>
           <div id="sj">35</div>
       </div>

       <script>
           var time = 30;
           var d = 0;//0-70为一次循环

           // 红灯时长为30秒，绿灯时长为35秒，
           // 黄灯时长为5秒。每隔1秒会减1，当减到0时会换灯。
           var red = document.getElementById("red");
           var yellow = document.getElementById("yellow");
           var green = document.getElementById("green");
           var sj = document.getElementById("sj");


           setInterval(function(){
               d++;
               time--;
               sj.innerText = time;
               if(time==0){
                   if (d==30) {
                       time=5;
                       red.style.backgroundColor = "floralwhite";
                       yellow.style.backgroundColor = "yellow";
                   }else if(d==35){
                       time=35;
                       yellow.style.backgroundColor = "floralwhite";
                       green.style.backgroundColor = "green";
                   }else if (d==70) {
                       time=30;
                       d=0;
                       green.style.backgroundColor = "floralwhite";
                       red.style.backgroundColor = "red";
                   }

               }
           },330)