JQuery动态时钟

最新推荐文章于 2019-10-28 21:01:03 发布

今晚月亮也睡了

最新推荐文章于 2019-10-28 21:01:03 发布

阅读量288

点赞数

本文链接：https://blog.csdn.net/weixin_45756606/article/details/102699136

版权

动态时钟：

- 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery.js"></script>
<center>
    <span id="clock1"></span>
    <span id="clock2"></span>
    <span id="clock3"></span>
</center>
<div style="text-align:center;clear:both">
</div>
<script type="text/javascript">
    (function($) {
        var _options = {};
        var _container = {};
        jQuery.fn.MyDigitClock = function(options) {
            var id = $(this).get(0).id;
            _options[id] = $.extend({}, $.fn.MyDigitClock.defaults, options);
            return this.each(function() {
                _container[id] = $(this);
                showClock(id);
            });

            function showClock(id) {
                var d = new Date;
                var h = d.getHours();
                var m = d.getMinutes();
                var s = d.getSeconds();
                var ampm = "";
                if (_options[id].bAmPm) {
                    if (h > 12) {
                        h = h - 12;
                        ampm = " PM";
                    } else {
                        ampm = " AM";
                    }
                }
                var templateStr = _options[id].timeFormat + ampm;
                templateStr = templateStr.replace("{HH}", getDD(h));
                templateStr = templateStr.replace("{MM}", getDD(m));
                templateStr = templateStr.replace("{SS}", getDD(s));
                var obj = $("#" + id);
                obj.css("fontSize", _options[id].fontSize);
                obj.css("fontFamily", _options[id].fontFamily);
                obj.css("color", _options[id].fontColor);
                obj.css("background", _options[id].background);
                obj.css("fontWeight", _options[id].fontWeight);
                //change reading
                obj.html(templateStr)
                //toggle hands
                if (_options[id].bShowHeartBeat) {
                    obj.find("#ch1").fadeTo(800, 0.1);
                    obj.find("#ch2").fadeTo(800, 0.1);
                }
                setTimeout(function() {
                    showClock(id)
                }, 1000);
            }

            function getDD(num) {
                return (num >= 10) ? num : "0" + num;
            }

            function refreshClock() {
                setupClock();
            }
        }
        //default values
        jQuery.fn.MyDigitClock.defaults = {
            fontSize: '50px',
            fontFamily: 'Microsoft JhengHei, Century gothic, Arial',
            fontColor: '#ff2200',
            fontWeight: 'bold',
            background: '#fff',
            timeFormat: '{HH}<span id="ch1">:</span>{MM}<span id="ch2">:</span>{SS}',
            bShowHeartBeat: false,
            bAmPm: false
        };
    })(jQuery);

    $(document).ready(function() {
        $(function() {
            $("#clock1").MyDigitClock();
            $("#clock2").MyDigitClock({
                fontSize: 50,
                fontFamily: "Century gothic",
                fontColor: "#000",
                fontWeight: "bold",
                bAmPm: true,
                background: '#fff',
                bShowHeartBeat: true
            });

            $("#clock3").MyDigitClock({
                fontSize: 150,
                fontColor: "grey",
                background: "#fff",
                fontWeight: "bold",
                timeFormat: '{HH}:{MM}'
            });
        });
    });
</script>

</body>
</html>

效果如图：
在这里插入图片描述

今晚月亮也睡了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery动态时钟

动态时钟：- 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="jquery.js"><...
复制链接

扫一扫