day 08 Math/Date/定时器

day 08

1. Math

数学对象的特点: 不需要定义对象实例，直接通过 Math.方法名直接调用。

Math.floor(小数) 向下取整取出小于该数的最大整数

console.log(Math.floor(3.4));//3
console.log(Math.floor(3.9));//3
console.log(Math.floor(-3.4));//-4

Math.ceil(小数) 向上取整取出大于该数的最小整数

console.log(Math.ceil(2.3));//3
console.log(Math.ceil(2.9));//3
console.log(Math.ceil(-2.5));//-2

Math.round(小数) 四舍五入
Math.sqrt(number) 开平方根
Math.pow(m,n) 返回m的n次方
Math.min(1,-2,3,4) 取多个数最小值
Math.abs(number) 返回绝对值
Math.random() 返回[0,1)之间的随机数，左闭右开
- 掌握如何获取任意区间的随机数

// 获取[0,10)之间的随机数
console.log(parseInt(Math.random()*10));
// 生成[5,12)之间的随机数
console.log(parseInt(Math.random()*7)+5);

//如何获取任意区间的随机数
function rand(min, max){
    return parseInt(Math.random()*(max-min))+min;
}
console.log(rand(20,35));

案例：随机生成彩虹条

获取批量元素，无论几个都是数组 getElementsByTagName('li');
通过JS的方式修改li的颜色 oLis[0].style.backgroundColor ='red';

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>
<script type="text/javascript">

    // 需求：刷新后改变彩虹条的颜色
    // 提示:颜色的构成格式 #FFFFFF
    
    // 1. 如何获取批量元素
    //无论几个都是数组
    var oLis = document.getElementsByTagName("li");
    // HTMLCollection(10) [li, li, li, li, li, li, li, li, li, li]
    // console.log(oLis);
    
    // 2. 如何通过JS的方式修改li的颜色
    // background-color->backgroundColor(去掉-,第二个单词首字母大写)
    oLis[0].style.backgroundColor ='red';
    
    // 3. 生成随机颜色给li的背景颜色赋值
    var color = '#';
    var str='0123456789abcdef'; //代表16进制(字母不区分大小写)
    for(var i=0; i<oLis.length;i++){
        color = '#';//重置
        // 生成6位随机数
        for(var j=0; j<6;j++){
            // 随机生成0-16的数，作为下标
            color += str.charAt(rand(0,16));
        }
        oLis[i].style.backgroundColor = color;
    }
    
    // 生成随机数
    function rand(min, max){
        return parseInt(Math.random()*(max-min))+min;
    }
    
</script>

2. 日期对象

1）定义

var d = new Date(); //Thu Jan 07 2021 16:39:32 GMT+0800 (中国标准时间)

带参数

var date = new Date('2003/5/20 5:15:25');
console.log(date);//Tue May 20 2003 05:15:25 GMT+0800 (中国标准时间)

2）获取时间的方法

getFullYear() //返回年份
getMonth() <font color='red'>返回月份值，从0开始 0~11</font>
getDate() //返回日期
getDay() <font color='red'>返回星期几 0~6 星期日为0</font>
getHours() //返回小时数
getMinutes() //返回分钟数
getSeconds() //返回秒数

3）字符串改为时间

方法1：

    var date = new Date('2003/5/20 5:15:25');
    console.log(date);//Tue May 20 2003 05:15:25 GMT+0800 (中国标准时间)

方法2： Date.parse(日期字符串) //返回自1970年1月1日起至参数日期的毫秒数

   var t = new Date(Date.parse("2001-8-6,18:23:56"));
   console.log(t);//Mon Aug 06 2001 18:23:56 GMT+0800 (中国标准时间)

toLocaleString

//系统自带按照本地时间显示的函数
var date = new Date();
//按照本地风格显示时间
console.log(date.toLocaleString());//2021/1/7

4）设置时间

setDate() //改变Date对象的日期
setHours() //改变小时数
setMinutes() //改变分钟数
setMonth() //改变月份，从0开始
setSeconds() //改变秒数
setTime() //改变完整的时间，毫秒数
setYear() //改变年份

var d = new Date();
d.setHours(5); //修改hours为5
document.write(d);

var d = new Date();
d.setDate(d.getDate()+10);//设置10天后的时间，如果时间超出，日期会自动变为下个月的时间
document.write(d);

### 5) 日期差

* 日期可以相减，不能相加
* 日期相减得到毫秒数

var date1 = new Date();
var date2= new Date('2000-1-10');
console.log(Math.round((date1-date2)/1000/60/60/24));

</script>

### 6）定时器

#### 循环定时器

##### 语法：

setInterval(函数,执行的间隔/毫秒); //连续执行


* setInterval返回自己的钥匙，用来停止定时器
* 停止定时器的方法: clearInterval(停止定时的钥匙)

* 三种写法：

//a.最常见的使用方式
setInterval(function(){

  console.log('haha');

},1000);

//b.
function fun(){

  console.log('haha');

}
setInterval(fun, 1000);

//c. 不常用
function fun(){

  console.log('haha');

}
setInterval('fun()', 1000);


停止定时器:

var count = 0;
var time = setInterval(function(){

  console.log(count++ + "只绵羊");
  
  if(count == 5){
      clearInterval(time);
  }

},1000);


应用：电子时钟

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p id='time'>时间</p>
</body>

</html>
<script type="text/javascript">

var oTime = document.getElementById('time');
// 初始化界面
var date = new Date();
oTime.innerHTML = date.getHours()+':'+ date.getMinutes()+':'+date.getSeconds();

setInterval(function(){
    var date = new Date();
    oTime.innerHTML = date.getHours()+':'+ date.getMinutes()+':'+date.getSeconds();
},1000);

</script>


#### 延时定时器

* setTimeout（回调函数，毫秒数）;
* clearTimeout(t);       //清除定时器       
* 设置在指定的毫秒数后执行一次回调函数，返回定时器编号。
* 体现的是延迟完成一件事情。

setTimeout(function(){

console.log('Boom!!!')

},5000);
//五秒后打印Boom!!!

day 08 Math/Date/定时器

day 08

1. Math

2. 日期对象

1）定义

2）获取时间的方法

3）字符串改为时间

4）设置时间

shasha

引用和评论

day34 gulp

2025年最新反编译微信小程序的教程及工具

手写一个动态海洋和天空效果的vue hooks

你可能不知道的图片加载相关知识

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包

LRU算法，你别跑，我就要吃透你