《js——Bom》

最新推荐文章于 2024-08-27 15:59:21 发布

游如鑫

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量27

点赞数

文章标签： javascript 前端 html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/2303_78171667/article/details/134491307

版权

1_BOM简介

<script>

//DOM:document object model

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

//BOM: Brower object model

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

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

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

// window

// document

// location

</script>

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

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

}

</script>

4_定时器的基本用法

<script>

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

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

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

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

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

</script>

5_延迟定时器的用法

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

6_重复定时器

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

7_在页面显示当前时间

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

7_在页面显示当前时间

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

9_点名系统版本1

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

10_点名系统

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

11_抽奖系统版本

<style>

td{

width: 100px;

height: 40px;

border: 1px solid black;

text-align: center;

}

button{

width: 100px;

height: 40px;

}

</style>

</head>

<body>

<script>

//作业:

/*

自制一个课题小游戏：

突出：

美观性

随机性

趣味性

大众性

加分性和惩罚性

不允许抄袭网上资源

*/

</script>

</body>

12模拟手机验证码

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

13红绿灯实现

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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《js——Bom》

script>//DOM: 文档对象模型,通过document.getElementByXxx()获取HTML文档内部的元素//浏览器器对象模型.可以获取一些浏览器自带的功能// 由于没有统一的BOM标准，每个浏览器都有自己的BOM实现方法，// BOM的浏览器兼容性较差。常见的BOM对象有：// window</script>
复制链接

扫一扫

游如鑫 CSDN认证博客专家 CSDN认证企业博客

码龄1年

40: 原创

48万+: 周排名

24万+: 总排名

2387: 访问

: 等级

401: 积分

0: 粉丝

1: 获赞

21: 评论

1: 收藏

私信

关注

热门文章

最新评论

《JAVA面向对象——抽象类与接口》
CSDN-Ada助手: 恭喜您写完了第13篇博客！标题《JAVA面向对象——抽象类与接口》让我对您的文章产生了浓厚的兴趣。您对这个主题的深入探讨一定为读者提供了很多有价值的知识。在接下来的创作中，我建议您可以考虑探讨一些具体的应用场景，或是与其他编程语言的比较，以进一步丰富您的内容。再次感谢您的辛勤创作，期待您的下一篇博客！
《JAVA面向对象——类的多态》
CSDN-Ada助手: 恭喜博主撰写了第14篇博客《JAVA面向对象——类的多态》！不断创作并分享知识是非常值得赞赏的。我觉得下一步可以考虑深入探讨多态在实际项目中的应用，或者通过实例展示多态的灵活性和优势。希望这些建议对您的创作有所帮助，期待您继续分享更多有关JAVA面向对象的精彩内容！
《JAVA面向对象——类的高级特性》
CSDN-Ada助手: 恭喜您发布了《JAVA面向对象——类的高级特性》这篇精彩的博客！您对JAVA面向对象的理解和分享让我受益匪浅。希望您能继续坚持创作，分享更多关于JAVA编程的知识和经验。或许下一步可以考虑写一些实例分析或者与其他编程语言的比较，这样可以让读者更好地理解和运用所学知识。期待您更多的精彩内容！
《JS第三章——数组》
CSDN-Ada助手: 恭喜您写了第16篇博客《JS第三章——数组》！持续创作博客不仅展示了您对JS的深入理解，而且为读者提供了有价值的学习资源。在下一步的创作中，或许您可以考虑深入探讨数组的高级应用，例如数组的排序算法或是使用数组解决实际问题的案例分享。期待您的下一篇博客，谦虚地说，我相信您会继续带给我们更多精彩的内容！
《JAVA面向对象——异常》
CSDN-Ada助手: 恭喜您写了第17篇博客《JAVA面向对象——异常》，持续创作是一项了不起的成就！您在这篇博客中介绍了JAVA面向对象编程中的异常处理，对读者来说无疑是非常有价值的。我想建议您在下一步的创作中，可以考虑分享一些实际案例，让读者更好地理解异常处理的实际应用。再次感谢您的分享，期待您更多的精彩文章！

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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