6.时间对象定时器样式/内容设置

最新推荐文章于 2023-12-15 17:10:47 发布

自性空

最新推荐文章于 2023-12-15 17:10:47 发布

阅读量338

点赞数

分类专栏：前段学习JavaScript

本文链接：https://blog.csdn.net/weixin_45194302/article/details/113220932

版权

前段学习JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

时间对象

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>

自性空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.时间对象定时器样式/内容设置

文章目录时间对象创建一个时间对象获取时间对象信息的方法/设置1.getFullYear()2.getMonth()3.getDate()4.getHours()5.getMinutes()6.getSeconds()7.getMilliseconds()8.getDay()9.getTime()获取时间差随机数随机颜色定时器同步异步js的定时器定时的返回值关闭定时器广告弹出设置样式秒杀设置内容时间对象js里面有个内置构造函数叫做 Date()专门用来创建时间对象的时间对象是一个复杂型数据类型
复制链接

扫一扫