美文网首页web前端一起努力
JavaScript之内置函数 Date和Math

JavaScript之内置函数 Date和Math

作者: 追逐_chase | 来源:发表于2018-03-16 10:07 被阅读6次
    timg.jpg

    日期函数Date()

    声明日期函数
    • Date还可以当作构造函数使用。对它使用new命令,会返回一个Date对象的实例。如果不加参数,实例代表的就是当前时间。
    var  date = new Date(); 
    
    获取日期和时间
    getDate()                  获取日 1-31
    getDay ()                  获取星期 0-6      
    getMonth ()                获取月  0-11
    getFullYear ()              获取完整年份(浏览器都支持)
    getHours ()                获取小时 0-23
    getMinutes ()                  获取分钟 0-59
    getSeconds ()                  获取秒  0-59
    getMilliseconds ()            获取当前的毫秒 
    getTime ()         返回累计毫秒数(从1970/1/1午夜)
    
    
    • 几个常用的方法
    var date = new Date();
        //转化成字符串
        console.log(date.toString());
        //日期格式
        console.log(date.toDateString()); //英文式
        console.log(date.toLocaleDateString()); //
    
    // 打印结果
    Mon Jun 11 2018 15:32:54 GMT+0800 (CST)
    Mon Jun 11 2018
    2018/6/11
    
    //当前时间 没有年月日
    console.log(date.toLocaleTimeString());
    //当前时间 有年月日
        console.log(date.toLocaleString());
        
    
    定时器
    • setInterval()函数
    window.setInterval(“执行的函数”,间隔时间) 
    
            setInterval(“fun()”,1000)     可以用 
            setInterval( function(){} , 1000 )  
    
    
    • 格式化当前时间
    //格式化时间 
    
    function getDateFormat (date) {
        //获取年 
        var year = date.getFullYear();
        
        //获取月
        var month = date.getMonth() + 1;
        //获取日
        var day = date.getDate();
        //获取小时
        var hours = date.getHours();
        //获取分钟
        var minute = date.getMinutes();
        //获取秒
        var second = date.getSeconds();
        //
        month = (month < 10 ? "0" + month : month);
        day = (day < 10 ? "0" + day : day);
        hours = (hours < 10 ? "0" + hours : hours);
        minute = (minute <10 ? "0" + minute : minute);
        second = (second < 10 ? "0" + second : second);
        
        return year + "年" + month + "月" +  day+ "日" + " " + hours + ":" + minute +":" + second;
    }
    
    
    • clearInterval(定时器名) 清除定时器
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>短信倒计时</title>
    
        <script type="text/javascript">
    
            window.onload = function () {
    
                var btn = document.getElementById("btn");
    
                var timer = null;
                var count = 10;
    
                btn.onclick = function () {
                    clearInterval(timer);
                    this.disabled = true;
    
                   timer = setInterval(fn,1000);
    
    
                    function fn() {
                        count --;
                        if (count == 0){
    
                            btn.innerHTML = "重新发送";
                            clearInterval(timer);
                            btn.disabled = false;
                            count = 10;
    
                            return;
                        } else  {
                            btn.innerHTML = "还剩余" + count + "秒";
                        }
    
    
    
                    }
    
    
    
    
                }
            }
    
        </script>
    
    </head>
    <body>
    
    <div class="box">
        <input type="text"> <button id="btn" >点击发送短信</button>
    </div>
    
    </body>
    </html>
    
    • setTimeout("函数",时间) 延迟执行, 只执行一次 (函数递归一块使用)
    setTimeout(fn,5000);     5秒钟之后,去执行 fn 函数, 只执行一次
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>隐藏广告</title>
        <style>
            img {
                position:absolute;
                top: 0;
            }
            #left {
               left: 0;
                overflow: hidden;
            }
            #right {
                right: 0;
            }
        </style>
    </head>
    <body>
    <img src="1.gif" alt="" id="left">
    <img src="2.gif" alt="" id="right">
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    <p>哈哈哈哈</p>
    
    <script type="text/javascript">
    
        function $(id) {
    
            return document.getElementById(id);
        }
    
        function hide(id) {
            $(id).style.display = "none";
        }
    
        function show(id) {
            $(id).style.display = "block";
        }
    
        setTimeout(closeAd,5000);
    
        function closeAd() {
            hide("left");
            hide("right");
    
        }
    
    </script>
    
    </body>
    </html>
    
    • 延迟执行
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="box">
    </div>
    
    
    <script type="text/javascript">
        var box = document.getElementById("box");
        var count = 5;
    
        setTimeout(goIndexPage,1000);
        function goIndexPage() {
            count --;
            box.innerHTML = "<a href='http://www.ezcarry.com'> 将在"+count+"秒后跳转到首页</a>";
            if (count <= 0) {
              //页面跳转 BOM
                window.location.href = "http://www.ezcarry.com";
    
            }else  {
                setTimeout(goIndexPage,1000);
            }
    
        }
    
    
    </script>
    
    

    缓冲公式

    • 100是一个变数,可以随意的设置
    leader = leader + (target - leader)/100;
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>缓慢动画</title>
        <style>
            div{
                position: absolute;
                top: 100px;
                left: 0;
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    
        <button id="btn"> 开始</button>
        <div id="div"></div>
    
    </body>
    </html>
    
    <script>
        var  btn = document.getElementById("btn");
        var  div = document.getElementById("div");
        var timer = null;
        var leader = 0;
        var target = 500;
        btn.onclick = function () {
            setInterval(function () {
                //速度 缓慢的公式
                leader = leader + (target - leader)/100;
                div.style.left = leader + "px";
    
            },10);
    
        }
    </script>
    
    效果图.gif
    Math函数
       //数学函数
        //1.取整函数 去大的 向上取整
        var num =  Math.ceil(1.02);
        console.log(num);
    
        //2.向下取整
        var num1 = Math.floor(1.5);
        console.log(num1);
    
        //3.四舍五入
        var num2 = Math.round(1.6);
        console.log(num2);
    
    
    

    想了解更多可以看Math函数文档

    • 仿Math函数求Max最大值
       function MyMath() {
            this.getMax = function () {
                var max = arguments[0];
    
                for (var i = 0; i < arguments.length; i ++){
                    if (max<arguments[i]){
    
                        max = arguments[i];
                    }
                }
                return max;
    
            };
        }
    
    
        var mt = new MyMath();
        var result = mt.getMax(10,20,33,45,66);
    
        console.log(result);
    
    • 随机16进制的颜色
        function getColor () {
            var str = "#";
            //定义数组
            var array = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
            for (var i = 0; i < 6; i++) {
                //0-15个数随机 包括15在内
                var num =parseInt(Math.random() *16);
                //根据下标 获取对象的 array的数据
                str += array[num];
            }
            
            return str;
        }
    console.log(getColor());
    

    相关文章

      网友评论

        本文标题:JavaScript之内置函数 Date和Math

        本文链接:https://www.haomeiwen.com/subject/dnppfftx.html