【JavaScript 前端开发】第八章_h.innertext = d.tolocalestring();-CSDN博客

本文链接：https://blog.csdn.net/2201_75321290/article/details/134362001

一.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();
   }
</script>

三.location对象

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

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

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

   如何对字符串进行编码解码的操作
   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();
   }
</script>

四.定时器的基本用法

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

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

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

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

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

五.延迟定时器的用法

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

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

// setTimeout(aa,3000);

setTimeout(function(){
close();
},5000)
</script>

六.重复定时器

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

重复定时器: 每隔多少时间都执行一次函数
无限循环除非代码写了关闭的条件
重复定时器的语法如下:
/*
   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>

九.点名系统版本1

style>
   td{
       width: 100px;
       height: 40px;
       border: 1px solid black;
       text-align: center;
   }
</style>

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

十.点名系统

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>

十二.红绿灯实现

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