H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】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) 日期差
* 日期可以相减,不能相加
* 日期相减得到毫秒数

<script type=”text/javascript”>

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

本文地址:H5W3 » 【JS】day 08 Math/Date/定时器

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址