js特效3（Date对象）

最新推荐文章于 2024-09-20 11:38:47 发布

甜甜今天学了吗

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量100

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/dawanhjiao/article/details/104863530

版权

1.九宫格布局

九宫格盒子所在的行列与盒子的总列数有关
行 = 盒子的下标 / 总列数；
列 = 盒子的下标 % 总列数;

<script>
    /*九宫格盒子所在的行列与盒子的总列数有关
    行 = 盒子的下标 / 总列数；
    列 = 盒子的下标 % 总列数;*/
    window.onload = function (ev) {
        f1('btn1').addEventListener('click',function (ev1) {
            f(3,f1('bottom'));
        });
        f1('btn2').addEventListener('click',function (ev1) {
            f(4,f1('bottom'));
        });
        f1('btn3').addEventListener('click',function (ev1) {
            f(5,f1('bottom'));
        });
    };
    function f1(id) {
        return document.getElementById(id);
    }
    /**
     * 九宫格布局
     * @param allcols 行数
     * @param parentNode 父盒子
     */
    function f(allcols, parentNode) {
        var boxW = 220, boxH = 360, margin = 15;
        for (var i = 0; i<parentNode.children.length; i++) {
            //求出当前盒子所在的行和列
            var row = Math.floor(i / allcols);
            var col = Math.floor(i % allcols);
            //盒子的定位
            var area = parentNode.children[i];
            area.style.position = 'absolute';
            area.style.left = col * (boxW + margin) + 'px';
            area.style.top = row *(boxH + margin) + 'px';
        }
    }
</script>

2.Data对象

（1）Date对象基于1970年1月1日（世界标准时间）起的毫秒数
（2）基本属性

	var Xdata = new Date();//当前时间
    //返回毫秒数，当前时间距1970年1月1日的毫秒时间
    document.write(Xdata.getTime() + '<br>'); 
    //返回时间的毫秒
 document.write(Xdata.getMilliseconds() + '<br>'); 
    //返回秒
    document.write(Xdata.getSeconds() + '<br>'); 
    //返回分钟
    document.write(Xdata.getMinutes() + '<br>'); 
    //返回小时
    document.write(Xdata.getHours() + '<br>'); 
    //返回星期几，0周日，6周六
    document.write(Xdata.getDate() + '<br>'); 
    //返回当月的第几天
    document.write(Xdata.getDay() + '<br>'); 
    //返回月份，从0开始，如3月是2
    document.write(Xdata.getMonth() + '<br>'); 
    //返回4位的年份，如2020
    document.write(Xdata.getFullYear() + '<br>'); 
    //你想要的时间
    var Ndata = new Date('2020/4/08 13:14:13');
    document.write(Ndata);

案例1：格式化时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>格式化时间</title>
</head>
<body>
<script>
    function fdata(d) {
        //验证
        if (!d instanceof Date){
            return;
        }
        var year = d.getFullYear();
        var mouth = d.getMonth() +1;
        var date = d.getDate();
        var hour = d.getHours();
        var min = d.getMinutes();
        var sec = d.getSeconds();
        //转换格式 yyyy--mm--dd hh:mm:ss
        mouth = mouth <'10' ? '0' + mouth : mouth;
        date = date <'10' ? '0' + date : date;
        min = min <'10' ? '0' + min : min;
        sec = sec <'10' ? '0' + sec : sec;
        hour = hour <'10' ? '0' + hour : hour;
        return year + '--' + mouth + '--' + date + ' ' + hour + ':' + min + ':' + sec;
    }
    var tim = fdata(new Date());
    document.write(tim);
</script>
</body>
</html>

3.定时器

（1）需求
①循环执行：js的程序执行速度是非常快的，如果希望一段程序可以每隔一段时间执行一次，可以使用定时器调用
setInterval(函数或者语句,时间单位毫秒);

<script>
    //循环执行
    setInterval(function () {
        document.write('哈哈哈');
     },1000)//单位是毫秒，1000毫秒是1秒
</script>

<script>
    //循环执行
    setInterval('document.write(\'啦啦啦\');',1000);
</script>

<script>
    //循环执行
    function f() {
        document.write("lalalal");
    }
    setInterval(f,1000);
    //不带括号是只想要这个函数，带()是想要函数的结果
</script>

案例1.倒计时鲜花表白

<body>
<div id="time">5</div>
<img src="image/flower.jfif" id="flo">
<script>
    window.onload = function (ev) {
        var date = setInterval(function () {
            f('time').innerText -= 1;
            //到0清除定时器
            if (f('time').innerText === '0'){
                clearInterval(date);
                f('flo').style.display = 'block';
                f('time').style.display = 'none';
            }
        },1000);
    };
    function f(id) {
        return  document.getElementById(id);
    }
</script>
</body>

案例2：放假倒计时

<body>
<div class="big">
    <div id="day" class="box"></div>
    <div id="hour" class="box"></div>
    <div id="min" class="box"></div>
    <div id="sec" class="box"></div>
</div>

<script>
    window.onload = function (ev) {
        var day = f1('day'), hour = f1('hour'), min = f1('min'), sec = f1('sec');
        var Xtime,Xdate,Ndate,Salldate,Sallmin;
        //定义将来时间
        var Ntime = new Date('2020/05/05 00:00:00');
        //定时器
        setInterval(function (ev1) {
            Xtime = new Date();//获取当前时间
            Xdate = Xtime.getTime();//当前时间距1970年1月1日的毫秒时间
            Ndate = Ntime.getTime();
            //两者相差所有的毫秒数
            Salldate  = Ndate - Xdate;
            //转换
            Sallmin = parseInt(Salldate / 1000); //所有秒
            var d = f(parseInt(Sallmin / 3600 / 24)); //天
            var Shour = f(parseInt(Sallmin / 3600 % 24)); //时
            var Smin =f(parseInt(Sallmin / 60 % 60)); //分
            var Ssec = f(parseInt(Sallmin %60)); //秒
            day.innerText =d ;
            hour.innerText =Shour ;
            min.innerText =Smin;
            sec.innerText =Ssec;
        },1000);
        function f1(id) {
            return document.getElementById(id);
        }
        function f(num) {
            return  num <  10 ? '0' + num : num;
        }
    };

</script>
</body>