网上线程的专场都是单调的加载loading转圈圈,以及一个局部遮罩层,感觉不好看
想着自己用延时器写一个好看的转场动画效果好了
代码可直接复制使用
实际效果浏览
shen’s Homehttp://www.longsong.xyz:5000/?username0=shen&username1=123456&username2=&username3=
代码如下:
//一个跳转界面,加载时自动播放
<div id="bg" src="./img/kelis.gif"
style="display:block;background-color: #ccc;width: 100%;position:absolute;height: 125%;opacity: 0.85;z-index: 1;">
<img id="shen" src="./img/kelis.gif" href="javascript:closeDiv()" style="width:100%;height:100%;position:absolute">
</div>
//定时器设置div不可见
<script language=javascript style="background:#000000">
var timerid = setTimeout(function () {
document.getElementById('bg').style.display = 'none';
}, 4000)
</script>
js 定时器介绍
分类 编程技术
js 定时器有以下两个方法:
- setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() :在指定的毫秒数后调用函数或计算表达式。
setInterval()
语法
setInterval(code,millisec,lang)
参数 | 描述 |
---|---|
code | 必需。要调用的函数或要执行的代码串。 |
millisec | 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。 |
lang | 可选。 JScript | VBScript | JavaScript |
以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:
<html>
<body>
<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>
<button onclick="int=window.clearInterval(int)">停止</button>
</body>
</html>
setTimeout()
语法
setTimeout(code,millisec,lang)
参数 | 描述 |
---|---|
code | 必需。要调用的函数后要执行的 JavaScript 代码串。 |
millisec | 必需。在执行代码前需等待的毫秒数。 |
lang | 可选。脚本语言可以是:JScript | VBScript | JavaScript |
实例演示如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>点击按钮,在等待 3 秒后弹出 "Hello"。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { setTimeout(function(){alert("Hello")},3000); } </script> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/73524.html