文章目录
时间对象
js里面有个内置构造函数叫做 Date()
专门用来创建时间对象的
时间对象是一个复杂型数据类型
创建一个时间对象
语法: var time = new Date()
返回值: 当前终端的时间
// 可以创建一个指定的日期时间对象 通过传递参数方式获得
1.传递数字
第一个数字表示年
第一个数字表示月
第一个数字表示日
第一个数字表示时
第一个数字表示分
第一个数字表示秒
=> 注意 至少传递两个参数 如果参数是一个 获取格林威尔时间
=> 除了 年 其他都会自动进位置
=> 0 表示一月
var time = new Date(2021,1,25,5,51)
2.传递字符串
"yyyy-mm-dd HH:MM:SS"
"yyyy/mm/dd HH:MM:SS"
1.当你使用字符串这个形式的时候,1月表示1月,12月表示12月
2.当年月日 和 时分秒 中间有个空格
var time = new Date('2019-12-12 12:12:25')
var time = new Date('2019/12/12 12:12:25')
获取时间对象信息的方法/设置
设置就是把下面的get 改为 set settime 里面填时间戳
1.getFullYear()
语法: 时间对象.getFullYear()
返回值: 该时间对象的年份信息 number类型
2.getMonth()
语法: 时间对象.getMonth()
返回值: 该时间对象的月份 number类型
3.getDate()
语法: 时间对象.getDate()
返回值: 该时间对象的日期信息 number类型
4.getHours()
语法: 时间对象.getHours()
返回值: 该时间对象的小时 number类型
5.getMinutes()
语法: 时间对象.getMinutes()
返回值: 该时间对象的分钟 number类型
6.getSeconds()
语法: 时间对象.getSeconds()
返回值: 该时间对象的秒 number类型
7.getMilliseconds()
语法: 时间对象.getMilliseconds()
返回值: 该时间对象的毫秒 number类型
8.getDay()
语法: 时间对象.getDay()
返回值: 改时间对象的一周中的第几天 0 代表周日 number类型
9.getTime()
语法: 时间对象.getTiem()
返回值: 该对象的时间戳 number类型
格林威治时间:1970.1.1.0.0.0
时间戳 时间对象到>格林威治时间的毫米数
获取时间差
获取两个时间节点之间的差距
// 获取两个时间节点的时间戳 相减
var time1 = new Date()
var time2 = new Date(2019,12,3,5,25,30)
// 时间戳相减 获取时间差
var res = Math.round(Math.abs(time1.getTime() - time2.getTime())/1000)
console.log(res)
// 倒计时案例
function getTimeDifference(time1,time2){
// 获取两个时间节点的时间戳 相减
// 时间戳相减 获取时间差
var res = Math.round(Math.abs(time1.getTime() - time2.getTime())/1000)
var day = parseInt(res/(60*60*24))
var hours = parseInt(res % (60*60*24)/(60*60))
var minute = parseInt(res%(60*60)/60)
var second = parseInt(res % 60)
new timeObje = {day:day,hours:hours,minute:minute,seconde:secode}
// 返回
return timeObje
}
随机数
/**
* 随机整数
* @param {Number} m 数字1
* @param {Number} n 数字2
* @return {number} 数字
* **/
function getRandom(m,n){
var max = Math.max(m,n)
var min = Math.min(m,n)
var randomCode = Math.floor(Math.random()*(max-min + 1)+min)
return randomCode
}
随机颜色
颜色的表示方式:
1.rgb()
2.十六进制
需要封装一个函数 返回一个字符串 是一个颜色的表示方法
返回:rgb(255,255,255)
返回: '#FFF000'
使用一个函数,用来接收参数,参数为true为rgb,false为十六进制
定时器
同步异步
单线程 同一时间只能做一个事情
js是单线程同步代码机制 当你写一个死循环的时候 后面的代码都不会执行了
webapi给我们提供了一个队列的机制
用来模拟多线程
准备了一个队列
我们叫做单线程异步
异步
不会立即执行代码
当代码从上向下的执行,遇到异步代码的时候 会把他放在队列里面,先不执行
等到所有的同步代码执行完毕,在从队列里面拿到代码来执行
js的定时器
js提供了两个异步定时器机制
1.setTimeout()
语法:setTimeout(函数,时间)
// 时间到达的时候,执行一遍就结束了,延迟定时器/炸弹定时器
2.setInterval()
语法:setInterval(函数,时间)
// 每隔一段时间,执行一遍函数
// 间隔定时器
// 时间是毫秒
定时的返回值
// 不分定时器的种类
// 只表示你页面中的第几个定时器
// 就是一个number数据的结果
var t1 = setInterval(fun,500) // 第一个
var t2 = setTimeout(fun,500) // 第二个
console.log(t1,t2) //可以打印第几个
作用
关闭定时器
clearInterval(关闭的定时器返回值)
clearTimeout(关闭的定时器返回值)
广告弹出 设置样式
js给css设置样式
<span id='box'>hello word</span>
box.style.backgroundColor = 'red'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../utils.js"></script>
<style>
div{
width: 200px;
height: 200px;
border: 2px solid red ;
background-color: blue;
position: fixed;
right: 0;
bottom: 0;
display: none;
}
</style>
</head>
<body>
<div id='box'>
<button id="btn">x</button>
</div>
<script>
// 默认隐藏 打开时不出来 一会出来
// 使用 settimeout() 随机时间/固定时间 打开
setTimeout(function(){
// box设置
box.style.display="block"
},1000* getRandom(1,6))
// 点击按钮然后关闭然后继续弹出
btn.onclick = function(){
box.style.display = 'none'
setTimeout(function(){
// box设置
box.style.display="block"
},1000* getRandom(1,6))
}
</script>
</body>
</html>
秒杀 设置内容
使用 标签id.innerText = 'xxx' 设置便签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../utils.js"></script>
</head>
<body>
<style>
#box{
width: 800px;
height: 200px;
background-color:snow ;
border: 3px black solid;
border-radius: 20px;
margin: 100px auto;
/* line-height: 50px; */
text-align: center;
}
#box > p{
width: 70px;
color: black;
display: inline-block;
text-align: center;
font-size: 50px;
line-height: 90px;
background-color: rgba(87, 84, 84,0.3);
border: solid black 3px;
border-radius: 20px;
}
h1{
text-align: center;
margin: 100px;
font-size: 100px;
}
</style>
<h1>距离下班还有</h1>
<div id="box">
<p id="daybox"></p> 天
<p id="hoursbox"></p> 时
<p id="minutebox"></p> 分
<p id="secondbox"></p> 秒
</div>
<script>
// 取目标时间
var time = new Date(2021,0,27,9,30)
// 定时器 每一秒间隔 换内容
setInterval(function(){
// 当前时间
var time2 = new Date()
// 之前写的获取时间差函数
var timeObj = getTimeDifference(time,time2)
// 填充时间
// 使用 .innerText = 内容 赋值
daybox.innerText = timeObj.day
hoursbox.innerText = timeObj.hours
minutebox.innerText = timeObj.minute
secondbox.innerText = timeObj.second
},1000)
</script>
</body>
</html>