javascript+jQuery如何实现360开机时间显示效果
小编给大家分享一下javascript+jQuery如何实现360开机时间显示效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
专注于为中小企业提供网站设计、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业若羌免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
实现效果:
实现原理:
给关闭按钮绑定点击事件,点击以后触发动画效果。利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将display属性值设为none,使得close按钮消失。
实现代码:
仿360开机效果
天气:晴天
下面方法把相差的时间组合成倒计时的字符串,然后放到页面相应位置实现,实时刷新
function CountDown(){ if(cha_time>=0){ var day = Math.floor(cha_time/3600/24); var hour= Math.floor((cha_time/3600)%24); var minutes = Math.floor((cha_time/60)%60); var seconds = Math.floor(cha_time%60); msg = "离结束还有"+day+"天"+hour+"小时"+minutes+"分"+seconds+"秒"; $(".ws_sg_con_big,.ws_sg_con_small").find("dd").html(msg); --cha_time; } else{ clearInterval(timer); alert("时间到,结束!"); } } timer = setInterval("CountDown()",1000);
看完了这篇文章,相信你对“javascript+jQuery如何实现360开机时间显示效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
网站标题:javascript+jQuery如何实现360开机时间显示效果
当前链接:http://myzitong.com/article/ghidch.html