day24（math 和 date日期的用法）

最新推荐文章于 2024-05-31 10:04:55 发布

李中豪前端大佬

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量128

点赞数

文章标签：前端 javascript 开发语言算法

本文链接：https://blog.csdn.net/weixin_69145757/article/details/132823424

版权

一.math

1.floor 向下取整
		就是保留最小整数
	console.log(Math.floor(1.1));-------值为1
	console.log(Math.floor(1.9));----------值为1
	console.log(Math.floor(-1.1));----------值是-2
2.ceil 向上取整
		就是保留最大整数
	console.log(Math.ceil(1.1));----值为2
	console.log(Math.ceil(1.8));---------值为2
	console.log(Math.ceil(-1.8));---------值为-1
	天花板：ceil--------向天花板取整，也就是向最大数值取整
3.round 四舍五入取整
		遵循四舍五入规则
	console.log(Math.round(1.1));----------值为1
	console.log(Math.round(1.5));----------值为2
4.sqrt 开方
		相当于加根号
	console.log(Math.sqrt(9));--------值为3
	console.log(Math.sqrt(8.8))；---------值为2.9左右
	开平方：Square Root Calculations----------缩写sqrt
5.pow(m,n) 返回m的n次方
	console.log(Math.pow(2,3));值为2的3次方，也就是8
	次方：power-------缩写为pow
6.Max(x1,x2...) 返回最大值
	console.log(Math.max(1,2,3,-5));值为3
7.min(x1,x2...) 返回最小值
	console.log(Math.min(1,2,3,-5));
8.abs 绝对值
	console.log(Math.abs(-5));
	绝对值：absolute value-----------缩写为abs
9.random
	Math.random(): 返回0~1之间的随机数（左闭右开）
	案例： 
	    for(var i=0; i<20; i++){
	        console.log(Math.round(Math.random()*10));[0,10] math-random后面乘的数就是随机数最小到最大的范围。随机数默认从零开始，到所乘的数结束，所以想要改变随机数变化的区间，可以通过调整乘数大小以及给函数整体加减具体数字来解决
	        console.log(Math.round(Math.random()*7));    此处函数乘以7，故变化区间就在0-7之间
	        console.log(Math.round(Math.random()*5)+1);--------[1,6] 想让变化区间的最小值和最大值增加，整体往x轴正方向平移，则需要给函数与相应数值乘积的整体加具体的数字。
	        console.log(Math.round(Math.random()*6)+3);--------[3,9]  
	        
	          
	        console.log(rand(2,8));----------这个是引入的js文件里面提前写好的函数，意思是生成括号内数字作为左右区间范围内的随机数（没有定时器的情况下需要手动刷新看效果）
	    }
	    js文件内：
	    function rand(max,min){
	        return Math.round(Math.random()*(max-min)+min) 即带入需要的最大值与最小值就可以得到相应的随机数区间
	    }
	    
	彩虹条案例：
	    代码思路：
	     1.颜色是如何构成的?
	            本质是#加6位16进制的数字（#111111~#ffffff）
	    代码：
	    var color = "#";
	    var str = "0123456789abcdef";-----------------包含所有十六进制数的字符串，一共十五个字符
	    for(let i=0; i<6; i++){
	        color += str.charAt(rand(0,15));------------此处使用提前写好的函数随机生成0-15之间的数字作为字符串索引的下标，等同于从字符串随机选择一个字符；然后拼接到#后面，每组循环六次，正好给#后面拼接6个随机数字，生成一个颜色
	    }
	    console.log(color);
	    
	    2.如何将生成的随机颜色以js对象的方式赋值给li
	    代码：
	    var oTest = document.getElementById("test");
	    oTest.style.backgroundColor = color;
	
	    3.如何批量的获取li元素 getElementsByTagName（意思是按照标记名获取元素）
	    document.getElementsByTagName("标签名"):返回标签对应的所有HTML元素，存放至数组中
	    
	    html：
	    <ul>
	        <li id="test"></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	    </ul>
	    script：
	        setInterval(function(){--------这是定时器
	        
	        var oLis = document.getElementsByTagName("li");---------通过标记名获取html元素组成oLis数组
	        var color = "#";                    color赋初值为“#”特殊字符串，一会只要给后面循环加上不同的六位十六进制数就好
	        var str = "0123456789abcdef";----------包含十六进制数字与所有字母的字符串，
	        for(var i=0; i<oLis.length; i++){    以li组成的数组作为外循环，遍历数组为其中的每一个li加上颜色属性；
	
	            for(var j=0; j<6; j++){----------循环十六进制里的六个数位，在这里循环6次为一组，为每位数随机赋值并拼接到color的字符串“#”后面，凑够【#+六位数】刚好构成一个十六进制颜色；
	                color += str.charAt(rand(0,15));-----------js文件中提前写好的函数，代表随机生成0-15范围内的一个数字作为str下标，索引到str字符串对应字符，然后拼接到color的值后面
	            }
	
	            oLis[i].style.backgroundColor = color; 注意这里的backgroundColor，在js里面所有的-拼接属性都必须去掉连字符然后后面的单词首字母大写；
	
	            color = "#";
	        }
	    },50);---------50代表50毫秒执行一次回调函数的代码

二.date日期
1.日期的创建方法

1）无参
	创建此时此刻运行的日期对象
	var date = new Date();
	console.log(date);
2）有参
	"日期格式字符串": "YYYY-MM-DD,hh:mm:ss"
    var date1 = new Date("日期格式字符串");
    var date1 = new Date("1997-07-01,12:13:14");
    console.log(date1);

2.提取日期对象的所有属性

1）年
	var date = new Date();
	console.log(date.getFullYear());
2）月
	var date = new Date();月份获取的值会比当下月份少一个月（代码习惯从0开始导致的），所以应用的时候要加上1
	console.log(date.getMonth());
3）日
	var date = new Date();
	console.log(date.getDate());
4）时
	var date = new Date();
	console.log(date.getHours());
5）分
	var date = new Date();
	console.log(date.getMinutes());
6）秒
	var date = new Date();
	console.log(date.getSeconds());
7）星期
	取值范围0-6 日，一，二，三，四，五，六
	var date = new Date();
	console.log(date.getDay());
8）综合案例
	要求：将日期转为自定义格式
    xxxx年xx月xx日 hh:mm:ss 星期x
代码:
    function myDate(date){
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = toTwo(date.getDate());
        var h = date.getHours();
        var mm = date.getMinutes();
        var s = date.getSeconds();
        var w = date.getDay();

        var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

        var str = y+"年"+m+"月"+d+"日 "+h+":"+mm+":"+s + " " + week[w];

        return str;
    }

    function toTwo(v){
        return v>=10?v:"0"+v;
    }-----------这段代码利用三目运算，意思是当v代表的数字不小于10（变成两位数），返回v本身的值，当v代表的数字小于10（一位数），就给前面拼接一个字符串“0”，保证数字占位始终是两位，有利于页面其他局部不受数字长短变化影响。此处可以将函数直接在规定日期形式的主调函数里面调用，分别用除了年份与星期几以外的数字作为参数，保证这些数字始终占位相同，无论是一位数还是两位数，都占两个位置

    console.log(myDate(date));

3.日期定义方式

	按照本地格式打印日期对象
	    console.log(date.toLocaleString());
	生成页面运行时的日期对象
	    var date = new Date();
	通过日期格式字符串,生成指定日期对象
	    "yyyy-MM-dd,hh:mm:ss"
	    var date = new Date("2001-2-1,15:32:32");
	    console.log(date.toLocaleString());
	通过时间戳生成指定日期对象
	    时间戳函数:Date.parse("2001-2-1,15:32:32"),
	    返回该日期字符串距离1970年1月1日相差的毫秒数
	    console.log(Date.parse("2001-2-1,15:32:32"));
	    var date = new Date(981012752000);
	    console.log(date.toLocaleString());

4.时间戳

1）概念
	时间戳:距离1970年1月1日相差的毫秒数
2）案例
	var date = new Date("1997-05-06");----------在这里日期格式字符串作用与毫秒计的时间戳功能相似，一般用日期格式字符串
    Date.parse("日期格式字符串"):返回时间戳
    console.log(Date.parse("1997-05-06"));
    console.log(date.toLocaleString());

5.设置时间

setDate()     ----------------------------改变Date对象的日期
setHours()    ----------------------------改变小时数
setMinutes()  ----------------------------改变分钟数
setMonth()    ----------------------------改变月份，从0开始
setSeconds()  ----------------------------改变秒数
setFullYear() ----------------------------改变年份

var date = new Date();
date.setDate(date.getDate()+10);------当前时间基础上加十天，一般用于登录有效期之类的
date.setFullYear(2222);
console.log(date.toLocaleString());-------本地格式打印

6.时间差

日期date是可以相减的

案例：
    var date1 = new Date();
    var date2 = new Date("2000-12-29");

    console.log(Math.round((date1-date2)/1000/60/60/24));-------此处直接得出的值如果不经历任何处理，就是以毫秒计算单位的，所以要除后面的数字最终得到得到天数

7.定时器

循环定时器:
    setInterval(回调函数,时间间隔);
返回值:关闭定时器的钥匙（可以赋值给新建变量，然后将变量填写在关闭clearinterval函数的括号里面）
关闭定时器的钥匙
    clearInterval(钥匙)
    
案例1：
    var count = 0;
    var fun = function(){
        console.log(++count);
    }

    setInterval(fun,1000);
 
案例2：

    var time = setInterval(function(){ -------------匿名函数
        console.log(++count);
        if(count == 5){
            clearInterval(time);
        }
    },1000);

案例3：简易时钟
    html：
    <input type="text" value="时间" id="time">
    script：
    var oTime = document.getElementById("time");
    setInterval(function(){
        var date = new Date();------------获取本地时间
        oTime.value = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    },1000);      变成时：分：秒格式的拼接时间获取函数与字符串，然后加上循环定时器，每秒执行一次，也就是每秒从本地获取一次时间信息
    
    
    
setTimeout（倒计时）
    setTimeout(function(){
        console.log("boom!!!");--------------倒计时3秒在控制台打印“boom！！！”
    },3000);