日期练习demo

最新推荐文章于 2020-03-15 14:01:19 发布

jiepp

最新推荐文章于 2020-03-15 14:01:19 发布

阅读量111

点赞数

文章标签：日期练习

本文链接：https://blog.csdn.net/jiepp/article/details/101151189

版权

练习demo

页面展示：

页面展示

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d div {width: 100px;height: 150px;float: left;background: url("img/0.PNG");background-size: cover}
        span {width: 100px;height: 150px;background-color: #eee;display: block;float: left;font-size: 100px;text-align: center;line-height: 130px}
        #d {position: absolute;width: 800px;height: 150px;left: 50%;top: 50%;margin-left: -400px;margin-top: -100px}
        span:hover {transform: scale(0.9);color: white;background-color: black}
        #d div:hover {transform: scale(1.2)}
    </style>
</head>
<body>
<div id="d">
    <div></div>
    <div></div>
    <span>:</span>
    <div></div>
    <div></div>
    <span>:</span>
    <div></div>
    <div></div>
</div>
<script>
    var od = document.querySelector("#d").querySelectorAll("div");
    // 获取日期
    function run() {
        var date = new Date();
        var h = setstring(date.getHours());
        var m = setstring(date.getMinutes());
        var s = setstring(date.getSeconds());
        // 保存日期字符
        function setstring(num) {
            return num < 10 ? ("0" + num) : num.toString();
        }
        var arr = [h[0], h[1], m[0], m[1], s[0], s[1]];
        // 日期的同步显示
        for (var i = 0; i < od.length; i++) {
            od[i].style.backgroundSize = "cover";
            for (var j = 0; j < arr.length; j++) {
                od[i].style.backgroundImage = "url(img/" + arr[i] + ".PNG)";
            }
        }
    }
    setInterval(run, 1000);
    // var timer=setInterval(function () {
    //     window.location.reload();
    //     clearInterval(timer);
    // },3000)
    // var timer=setTimeout(function () {
    //     window.location.reload();
    //     clearTimeout(timer);
    // },3000)
</script>
</body>
</html>

整理笔记时发现自己做的小demo,传上来了，么么哒！

jiepp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
日期练习demo

练习demo页面展示：代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d div {width: 100px;heigh...
复制链接

扫一扫