Javascript特效：普通倒计时

知识点

设置定时器

var timeid = window.setInterval("方法名或者方法","延时");
// 第一种方式
window.setInterval(function(){console.log('哈哈哈')
},1000)// 第二种方式
window.setInterval('console.log("哈哈")',1000)// 第三种方式
window.setInterval(test,1000);
function test() {console.log('哈哈哈')
}

清除定时器
```
window.clearInterval(timeid);
```

运行效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}body{background-color: #000;text-align: center;padding: 200px;}#pic{display: none;}#time{font-size: 200px;color:red;}</style>
</head>
<body><div id="time">5</div><img id="pic" src="data:images/flower.gif" alt="">
</body>
<script>window.onload = function (ev) {var intervalID = setInterval(function () {var time = $('time');time.innerText -= 1 ;// 清除定时器if (time.innerText ==='0') {clearInterval(intervalID);$('pic').style.display = 'block';time.style.display = 'none';}}, 1000);function $(id) {return typeof id === 'string' ? document.getElementById(id):null;}}
</script>
</html>

Javascript特效：普通倒计时相关推荐

Moo.fx 超级轻量级的 javascript 特效库
Moo.fx是一个超级轻量级的 javascript 特效库(7k),能够与 prototype.js 或mootools 框架一起使用.它非常快.易于使用.跨浏览器.符合标准,提供控制和修改任何 ...
11种控制内容展示的JavaScript特效和技巧
交付信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容. 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它.本文里面,我们为你收 ...
HTML5 和 JavaScript 特效
这篇文章向大家展示8个惊艳的 HTML5 和 JavaScript 特效.作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性,越来越多的开发人员开始使用 HTML5 来制作各种交互性强.效果 ...
php活动倒计时代码,JavaScript实现活动倒计时效果的代码分享
这篇文章主要为大家详细介绍了基于JavaScript实现活动倒计时效果,距离活动时间还剩多少,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js倒计时效果的具体代码,供大家参考 ...
Javascript实现秒杀倒计时（时间与服务器时间同步）
转自: http://hi.baidu.com/flondon/item/04e89ece8f5ecf0d0ad93a98 Javascript实现秒杀倒计时(时间与服务器同步) 现在有很多网站都在做 ...
Javascript特效之删除内容效果
Javascript特效之删除内容效果今天分享一个网页经常会用到的删除内容效果即想列表一样的每列数据实现单列删除效果. 效果图: 点击右上角的X后该内容会慢慢删除. 实现思路:实际上很简单,就是在该 ...
Javascript特效之可翻阅上一条下一条的动态文字
Javascript特效之可翻阅上一条下一条的动态文字我们经常会看到网站有一些自动跳动的新闻动态,今天来看看新闻动态怎么实现还有怎么手动选择上一条和下一条. 先来看看效果图: 点击箭头则会显示上一条 ...
javascript特效模拟marquee
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><script type ...
个性JavaScript特效页面大全
个性JavaScript特效页面大全 (在展示页面右键--查看源文件即为源码): 1:警报对话框篇 2:菜单导航篇 3:状态栏特效篇 4:浏览器篇 5:页面背景篇 6:页面导航篇 7:页面搜素篇 8: ...
JS与CSS交互及JavaScript 特效之四大家族
一.JS获取与CSS交互问题: (1)CSS样式有三种类型:行内样式.内部样式和外部样式 (2)JavaScript获取CSS样式时分为两种情况:行内样式获取法和非行内样式获取法 ...

Javascript特效：普通倒计时

知识点

运行效果

代码

Javascript特效：普通倒计时相关推荐

最新文章

热门文章