javascript - 有一个倒计时,写在一个span标签里,如何用正则实现如图效果
高洛峰
高洛峰 2017-04-11 12:51:11
[JavaScript讨论组]

12:30:30

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(7)
怪我咯

实现这个不会用到正则。
setInterval和时间戳times计算就好计算了。

times++
var s1 = times % 60 < 10 ? "0" + times % 60 : times % 60 + "",
s2 = times % 60,
m1 = Math.floor(times / 60) % 60 < 10 ? "0" + Math.floor(times / 60) % 60 : Math.floor(times / 60) % 60 + "",
m2 = Math.floor(times / 60) % 60,
h1 = Math.floor(times / 3600) % 24 < 10 ? "0" + Math.floor(times / 3600) % 24 : Math.floor(times / 3600) % 24 + "",
h2: Math.floor(times / 3600) % 24;

角标1放在第一位,2放在第二位。把计算的数值放到相应的标签就可以了。
主要技术点列这儿了。
天数年数都这么去计算,很准确。

巴扎黑

不需要正则

var dateTime = new Date(),
    difference = dateTime.getTime() - mag.serverTime; //服务器与当前时间差
    var t1=null;  
    t1 = setInterval(function() {
        $(".endtime").each(function() {
            var obj = $(this);
            var endTime = new Date(parseInt(obj.attr('rel')) * 1000); //结束时间
            var e_time = endTime.getTime();
            var nowTime = new Date(); //当前时间
            var nMS = endTime.getTime() - nowTime.getTime() + difference; //距离时间差
            if(nMS>0){
                var myD = Math.floor(nMS / (1000 * 60 * 60 * 24)),
                myH = Math.floor(nMS / (1000 * 60 * 60)) % 24,
                myM = Math.floor(nMS / (1000 * 60)) % 60,
                myS = Math.floor(nMS / 1000) % 60,
                html = "<span>"+myD+"</span>天<span>"+myH+"</span>时<span>"+myM+"</span>分<span>"+myS+"</span>秒";
                obj.html(html);
            }else{
                obj.html("<span>00</span>天<span>00</span>时<span>00</span>分<span>00</span>秒");
                var t2 = clearInterval(t1);  
            };
        });
    },100);
PHP中文网

不需要用正则,实时更新span里面的文本就行了

巴扎黑

正则用来处理字符串还行,但这个是样式,所以每个数字用span包一下加样式就好了。

PHPz

定时器

<span><b>0</b><b>7</b>:<b>3</b><b>0</b>:<b>5</b><b>0</b></span>

去改变里面b的值就可以了。

ringa_lee

蛋疼,好好地非要用正则做?就算用正则不也是匹配数字后加标签么,意义何在?

怪我咯

还是好好学基础吧

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号