前端开发原生JS实现时钟效果

前端开发app混合开发框架 wap前端开发框架 前端开发ui框架

代码片段 1

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>时钟效果</title>
    <style>
        .time {
            font-family: ‘华文细黑’;
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <div class=”time”>当前时间:<span id=”time”></span></div>
</body>
<script>
    //日期格式化(可以动态显示哦~~)
    function timeFormat() {
        var today = new Date();
        year = today.getFullYear(),
            month = today.getMonth() + 1,
            day = today.getDate(),
            hour = today.getHours(),
            minute = today.getMinutes(),
            second = today.getSeconds(),
            week = today.getDay(),
            weekend = [“星期日”, “星期一”, “星期二”, “星期三”, “星期四”, “星期五”, “星期六”],
            weekDay = weekend[week];
        month < 10 ? month = “0” + month : month;
        day < 10 ? day = “0” + day : day;
        hour < 10 ? hour = “0” + hour : hour;
        minute < 10 ? minute = “0” + minute : minute;
        second < 10 ? second = “0” + second : second;
        var time = year + “-” + month + “-” + day + ” ” + hour + “:” + minute + “:” + second + ” ” + weekDay;
        document.getElementById(“time”).innerHTML = time;
    }
    setInterval(timeFormat, 1000);
//日期差
</script>
</html>

web前端框架与移动前端开发 最新的前端开发框架 游戏前端开发框架下载

» 本文来自:前端开发者 » 《前端开发原生JS实现时钟效果》
» 本文链接地址:https://www.rokub.com/5931.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!