JS实现倒计时动画效果

js通过Date对象实现倒计时效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>倒计时动画</title><style>div{text-align:center;height:100px;line-height:100px;}</style><script>window.onload = function(){setInterval(FreeTime,1000);}function FreeTime(){var curTime = Date.now();var endTime = new Date("2017-10-26 16:00:00");var allFreeSeconds = (endTime-curTime)/1000;if(allFreeSeconds>0){var freeDay = Math.floor(allFreeSeconds/(24*60*60));var freeHour = Math.floor(allFreeSeconds/(60*60) % 24);var freeMinute = Math.floor(allFreeSeconds/60 % 60);var freeSecond = Math.floor(allFreeSeconds%60);document.getElementById("nowTime").innerHTML = "剩余"+freeDay+"天"+freeHour+"时"+freeMinute+"分"+freeSecond+"秒";}else{document.getElementById("nowTime").innerHTML = "已结束";}}</script>
</head>
<body>
<div><span id="nowTime"></span>
</div>
</body>
</html>

JS实现倒计时动画效果相关推荐

js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示下载资源: 16 次下载资源下载积分: 20 积分 function () { ...
（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果.分/秒/毫秒/ 第一步:构建HTML 结构和样式  <div class="timing" ...
使用JS代码编写动画效果
使用JS代码编写动画效果下面展示一些 JS代码. 创建一个可以简单移动的动画函数//obj 要执行动画的对象// attr 想要变化的方向或大小如width top left//target 目标 ...
html广告倒计时代码,js实现倒计时广告效果
页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看,这个效果挺烦人的哈哈哈),效果大概如下图: js实现倒计时广告效果.gi ...
Vue倒计时动画效果
这一次在b站看到一个博主做的一个倒计时的动画效果,跟着做了一下.以下是对此次项目的一些记录与总结. 该项目效果链接:Vue倒计时 HTML部分: <div id="app"& ...
android刷新时的圆形动画_Android 实现倒计时动画效果
本文没有写作背景,在闲暇之余,想巩固下用到的知识,才有了这篇文章的产出.觉得内容太简单的神们,可以绕道了,不过如果是个神,还是个喷子,可以留下改进建议再走也不迟. 想要实现的效果图如下: 点击&quo ...
Android 实现倒计时动画效果
想要实现的效果图如下: 点击"倒计时开始"按钮,会出现从10到0的倒计时动画.说是动画,其实并不是用animation等来制作,而仅仅是用TextView更新文字的方式来实现动画效 ...
点状环形倒计时动画效果（使用icon作为基础图形）
使用icon简单做一个倒计时的动画也是因为需求原因,要使用UI给的icon做一个倒计时:说实话,简单的环形倒计时真的不难,但时利用icon做一个环形倒计时我也是第一次,我们看下效果图既然是icon ...

JS实现倒计时动画效果

JS实现倒计时动画效果相关推荐

最新文章

热门文章