day24(math 和 date日期的用法)

一.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));值为23次方,也就是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.颜色是如何构成的?
	            本质是#加616进制的数字(#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"),
	    返回该日期字符串距离197011日相差的毫秒数
	    console.log(Date.parse("2001-2-1,15:32:32"));
	    var date = new Date(981012752000);
	    console.log(date.toLocaleString());

4.时间戳

1)概念
	时间戳:距离197011日相差的毫秒数
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(钥匙)
    
案例1var count = 0;
    var fun = function(){
        console.log(++count);
    }

    setInterval(fun,1000);
 
案例2var 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);

你可能感兴趣的:(前端,javascript,开发语言,算法)