JavaScript

最新推荐文章于 2024-09-17 21:49:02 发布

m0_73418952

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量344

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/m0_73418952/article/details/134913634

版权

BOM简介

DOM:document object model

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

BOM: Brower object model

浏览器器对象模型.可以获取一些浏览器自带的功能

由于没有统一的BOM标准，每个浏览器都有自己的BOM实现方法，

BOM的浏览器兼容性较差。常见的BOM对象有：

window

document

location

window对象讲解

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

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

</body>

</html>

location对象

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<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();

}

</script>

</body>

</html>

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

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

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

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

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

延迟定时器的用法

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>



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

</body>

</html>

重复定时器

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

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

</body>

</html>

在页面显示当前时间

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>



当前时间为： <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>



</body>

</html>

距离新年倒计时

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>



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

</body>

</html>

点名系统版本

<!DOCTYPE html>

<html>

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

</html>

点名系统

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

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

</body>

</html>

抽奖系统版本

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

td{

width: 100px;

height: 40px;

border: 1px solid black;

text-align: center;

}

button{

width: 100px;

height: 40px;

}

</style>



</head>

<body>





<script>

//作业:

/*

自制一个课题小游戏：

突出：

美观性

随机性

趣味性

大众性

加分性和惩罚性

不允许抄袭网上资源

*/

</script>

</body>

</html>

模拟手机验证码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

手机号：<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>

</body>

</html>

红绿灯实现

<!DOCTYPE html>

<html>

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

</script>

</body>

</html>