Js 第八章

岳职软件22-01-40

已于 2023-11-12 21:02:26 修改

阅读量39

点赞数

文章标签： javascript 前端

于 2023-11-12 21:01:45 首次发布

本文链接：https://blog.csdn.net/2301_79613063/article/details/134365847

版权

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

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

五.延迟定时器的用法
<script>
等待多少时间执行一次函数就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)
</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>

十.点名系统
<button id="btn">开始点名</button>

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>