您的当前位置:首页 >凉山彝族自治州 >给网站添加一个活动倒计时效果 线报活动结束提示效果 正文
时间:2024-12-25 14:09:57 来源:网络整理编辑:凉山彝族自治州
大家好,我是小编鹏仔哥,本Q站主要是以资源活动分享为主体的网站,所以经常会分享一些活动,是活动都有结束时间,刚好前段时间逛其他网站,看到对应活动有对应结束倒计时效果,活动结束后会提示活动已经结束,给用
大家好,我是小编鹏仔哥,本Q站主要是以资源活动分享为主体的网站,所以经常会分享一些活动,是活动都有结束时间,刚好前段时间逛其他网站,看到对应活动有对应结束倒计时效果,活动结束后会提示活动已经结束,给用户体验是比较好的,所以也写了这个效果,分享给大家。
$$$$$乐赚呗$ 因为考虑到大家一些网站没有使用jq,或者jq版本低之类,所以使用原生来实现效果,这样任何网站都是可以使用。作者:鹏仔先生
效果如下图所示:
如果活动没结束,那么显示距离结束时间,为绿色,如果到期了,那么显示 活动已经结束,为红色提示。
下方是对应html和js代码
将html代码span标签中的时间修改为到期时间,格式一定乐赚呗要正确,例如 2018-08-08 24:00:00 ,并放置需要显示的地方。
将js代码,放置公共js中,或者其他只要引入的js文件中即可。
Markup
<spanid="ActivityDate">2020-05-08 24:00:00span>
JavaScript
<script>// 获取idvar ActivityDate = document.getElementById("ActivityDate"); functiontimepiece(key){ var datatime = /^[\d]{4}-[\d]{1,2}-[\d]{1,2}( [\d]{1,2}:[\d]{1,2}(:[\d]{1,2})?)?$/ig,str=,s; // 正则验证日期格式是否正确if(!key.match(datatime)){ console.log(日期参数错误,请按格式填写,如 1996-10-22 24:00:00); return } // 当前日期减去活动日期,判断是否超出var sec = (newDate(key.replace(/-/ig,/)).getTime() - newDate().getTime())/1000; if(sec < 0){ ActivityDate.innerHTML = " + ">" + "本活动已经结束" + ""; return } s = { 天:sec/24/3600, 时:sec/3600%24, 分:sec/60%60, 秒:sec%60 } for(i in s){ if(Math.floor(s[i]) >0) str += Math.floor(s[i]) + i; } if(Math.floor(sec) == 0){ str=0秒; } // 距离活动结束时间显示到页面 ActivityDate.innerHTML = " + ">" + "本活动还有" + str + "结束" + ""; // 每隔1秒更新一次 setTimeout(function(){ timepiece(key) },1000) } timepiece(ActivityDate.innerHTML); script>
对于样式,没做什么美化,后期有乐赚呗空会更新美化版。
出生在几点的人,看起来单纯,其实赚钱头脑好,能成高收入之人 2024-12-25 13:55
郑钦文近照撞脸巩俐,片场累到睡着,被调侃:赚钱没时间花深圳女网红,8年花800万整成范冰冰,嫁给主刀医生,后来怎么样了2024-12-25 13:30
0门槛赚积分兑商品!上众创指购,看视频赚钱赚积分还能兑商品!! 2024-12-25 13:17
刚出开心看广告赚钱,每天多赚30+,已出保姆级教程, 2024-12-25 13:13
港股异动 Keep(03650)最高涨超10% 《重返未来:1999》联名挑战火热开赛 IP联名影响力不断提升2024-12-25 12:48
Keep早盘涨逾14% 《重返未来:1999》联名挑战火热开赛2024-12-25 12:31
这些星座人群中特别显眼,缺点少优点多,赚钱路上从不下坡这5种花在冬天被养死,一点也不冤,是低级错误,请花友引以为戒2024-12-25 12:15
江苏5大名牌高中,上到就是赚到工作再忙也要午休,随时随地打开就能睡,8H随心躺午休折叠床体验2024-12-25 11:30
单月揽金过亿,看剧能赚钱?2024-12-25 11:26
哪4个星座,不算太聪明,但却情商高,赚钱和创业顺风顺水动车这个位置居然能坐小孩?网友吵翻2024-12-25 11:23
环翠楼街道南山社区开展“最强大脑”趣味百科问答活动NASA 卫星数据显示:地球大陆正在变得愈发干燥2024-12-25 13:55
济南地铁3号线二期开通运营 全市进入“空轨换乘”时代2024-12-25 13:44
原创肖战玩“脑筋急转弯”,挤眉弄眼的小表情忒多了,女生都自愧不如永远的阿诗玛:19岁成大明星,24岁精神分裂,半生在精神病院度过2024-12-25 13:35
“快乐富豪”丁磊,终于明白赚钱才是硬道理 2024-12-25 12:55
vivo联合拼多多百亿补贴实力宠粉,X100畅享7天无理由退货十本非常好看的文娱文,演绎人生,笑看风华2024-12-25 12:38
刚出开心看广告赚钱,每天多赚30+,已出保姆级教程, 2024-12-25 12:37
蟠桃叔:春山捏脖子 2024-12-25 12:33
紧密微炎茴玩小垄序魔评泊瓶肆愿歧和穿2024-12-25 12:04
自媒体运营赚钱!大学生如何做自媒体运营赚钱?3条建议 2024-12-25 11:55
餐饮创业如何选到赚钱的项目?【 AI快报 -- 娱乐速览】700万羽绒服无绒;梁洛施与马浴柯偶遇聊天2024-12-25 11:38