js-时钟效果+当前日期的前一天后一天表示

最新推荐文章于 2021-02-27 04:26:14 发布

秋天1014童话

最新推荐文章于 2021-02-27 04:26:14 发布

阅读量493

点赞数

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53340318

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

时钟效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clock{
            width: 600px;
            height: 600px;
            margin:0 auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }
        .clock div{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
        }
        .clock div#hour{
            background: url(images/hour.png) no-repeat center center; //图片的中心在盒子的中心
        }
        .clock div#minute{
            background: url(images/minute.png) no-repeat center center; //图片的中心在盒子的中心
        }
        .clock div#second{
            background: url(images/second.png) no-repeat center center; //图片的中心在盒子的中心
        }
    </style>
    <script>    
    window.onload = function(){
        var hour = document.getElementById("hour");
        var minute = document.getElementById("minute");
        var second = document.getElementById("second");
        var s = 0,m = 0, h = 0, ms = 0;
        setInterval(function(){
            var date = new Date();
            ms = date.getMilliseconds();
            s = date.getSeconds() + ms/1000;
            m = date.getMinutes() + s/60;
            h = date.getHours() % 12 + m/60;
            //时钟一圈360°，一圈60秒，一秒走6°
            second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
            minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
            hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";

        },1000);
    }
    </script>
</head>
<body>
    <div class="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
</body>
</html>

这里写图片描述

求当前日期的前一天、后一天

function getDate(addDay,fmt){
        // var curDate = new Date();
        var curDate = new Date("2016-12-31 06:8:3");
        if(addDay!=0){
            curDate.setTime(curDate.getTime() + 24*60*60*1000*addDay);
        }
        var fmt = fmt || "yyyy-MM-dd hh:mm:ss";
        return dateFormat(curDate,fmt);
    }

    function dateFormat(date,fmt){
        if(/(y+)/.test(fmt)){
            let str = date.getFullYear()+"";
            fmt = fmt.replace(RegExp.$1, str.substr(4-RegExp.$1.length));
        }
        var o = {
            'M+': date.getMonth()+1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        }
        for(var k in o){
            let str = o[k]+"";
            if(new RegExp(`(${k})`).test(fmt)){
                fmt = fmt.replace(RegExp.$1,RegExp.$1.length===1?str:padLeftZero(str));
            }
        }
        return fmt;
    }
    function padLeftZero(str){
        return ("00"+str).slice(str.length);
    }
    //测试
    // console.log(dateFormat(new Date(),"yyyy-MM-dd hh:mm:ss"));
    console.log(getDate(1,'yy-M-d h:m:s'));
    console.log(getDate(-1));
    console.log(getDate(0));

秋天1014童话

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-时钟效果+当前日期的前一天后一天表示

时钟效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .clock{ width: 600px; height: 600px; margin:0
复制链接

扫一扫

专栏目录