1_BOM简介
//DOM: 文档对象模型,通过document.getElementByXxx()获取HTML文档内部的元素
//BOM: Brower object model
//浏览器器对象模型.可以获取一些浏览器自带的功能
// 由于没有统一的BOM标准,每个浏览器都有自己的BOM实现方法,
// BOM的浏览器兼容性较差。常见的BOM对象有:
// window
// document
// location
2_window对象讲解
//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();
}
3_location对象
//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();
}
4_定时器的基本用法
//定时器: 每间隔多少时间毫秒 自动执行函数 的一种机制.
//例如5秒后退出系统 例如轮播图 每隔1秒进行图片的转变
//定时器的种类: 分为 延时定时器 和 重复定时器
//延时定时器: 等待多少时间 执行一次函数 就GG
//重复定时器: 每隔多少时间 都执行一次函数 无限循环 除非代码写了关闭的条件
5_延迟定时器的用法
// 等待多少时间 执行一次函数 就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)
6_重复定时器
//重复定时器: 每隔多少时间 都执行一次函数
//无限循环 除非代码写了关闭的条件
//重复定时器的语法如下:
/*
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);
}
7_在页面显示当前时间
//需求在网页上刷新时间
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);
8_距离新年倒计时
距离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);
9_点名系统版本1
//思路 :随机数函数 获取任意一个单元格 然后改变其样式
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);
}