您的当前位置:首页 >临高县 >给网站添加一个活动倒计时效果 线报活动结束提示效果 正文
时间:2024-12-25 10:01:09 来源:网络整理编辑:临高县
大家好,我是小编鹏仔哥,本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>
对于样式,没做什么美化,后期有手机赚钱软件排行空会更新美化版。
诈骗手段再出新招?诱导老人买黄金寄外地,幸被快递员发现及时报警漏网整整15年!1984年义县马圈子胡同“10·24”袭警案侦破始末2024-12-25 09:57
算法里的罪与罚:跨境电商的一场“盲盒游戏”⼁跨境观察哨真的没整?靠“换脸”翻身的5位男星,出道前后差距太大你知道吗2024-12-25 09:50
出借手机卡就能躺赢赚钱?当心沦为电诈“工具人”李连杰女儿36岁不恋爱不结婚,直言不想让孩子跟自己一样被抛弃2024-12-25 09:27
广东一相亲女孩被5位男子看中,举办方:一百多一次,男女都一样他因春晚走红,不慎摔伤成智残,被原配妻子抛弃,今靠情人养活2024-12-25 09:12
华创证券张瑜:全球货币政策转向在即,如何赚钱?坚守“顾客至上” 周黑鸭创始人周富裕带伤直播获赞誉2024-12-25 08:24
为什么高德地图能免费使用,靠什么赚钱服务大家,看完明白了房子才住了1年,细数装修的15个遗憾,看着不起眼,越住越委屈2024-12-25 08:24
如何赚钱?先从改正学习方法开始窦靖童:妈妈幸福就好,过气潦倒的爸爸,却成了我如今的心病2024-12-25 07:55
青岛市崂山分局交警大队车管所开展交通法规进军营安全月活动张兰被偶遇:离开美颜滤镜的她皮肤黝黑,皱纹多,与直播差距大2024-12-25 07:52
云南省维西傈僳族自治县发布大风蓝色预警一年级孩子数学第一次“月考”只有70分,家长怎么办?2024-12-25 07:38
02年,我第一次到刑场枪毙两个刑犯!那次经历后我去看了心理医生重温还珠格格才发现,神剧是琼瑶全家人杰作,儿媳何秀琼最受信任2024-12-25 07:27
柜哼梭滩歧-豆懦揭否瓜船罗重2024-12-25 09:58
销量还不错《星空》入围Steam今年12大最赚钱游戏《小小的我》定档,易烊千玺挑战甄子丹和陈思诚,胜负已定 2024-12-25 09:38
轻松赚取零花钱(美金):几个海外在线赚钱平台介绍2024-12-25 08:49
参加百万网红赚钱项目被骗?殷世航被指引流“投资”活动,涉及金额高达千万震惊发现!狼竟学会蜜蜂采蜜授粉,科学家揭示自然界奇妙模仿行为2024-12-25 08:30
含泪找猫后续,猫主人身份曝光,66666元赏金已到账,评论区笑死送给宝宝最好的蛇年礼物,生肖纪念币的含金量不可忽视2024-12-25 08:18
星环科技:深耕数据基础软件领域拥有核心技术,当前主要收入来源为大数据与云基础平台1994年李连杰前往韩国录节目,女粉丝现场尖叫,女主持当众调戏他2024-12-25 07:51
大模型创业之困:小模型难赚钱,大模型太烧钱,去年投融资金额缩水七成超级地球:为什么质量更大的“地球”可能不适合居住?2024-12-25 07:42
畅销榜Top 2,收入年年涨,做一款“躺着挣钱”的游戏有多香曾被劳动教养的著名演员许还山,一条硬汉!2024-12-25 07:39
腾达百科取得拆分式路由器天线专利,可满足使用者增设天线本体需求热烫后头发干毛缺乏质感是什么原因?2024-12-25 07:30
大众“关厂危机”背后——德国超级汽车大国地位“岌岌可危”表面风光无限,实则却是流氓头子、家暴恶魔,这些男星太会装了!2024-12-25 07:19