教程集 > 脚本编程 > javascript > 正文 js实现Div闪烁效果代码

js实现Div闪烁效果代码

发布时间：2016-11-26 编辑：jiaochengji.com

教程集为您提供js实现Div闪烁效果代码等资源，欢迎您收藏本站，我们将为您提供最新的js实现Div闪烁效果代码资源

实现Div闪烁效果我们中利用setInterval再加一些逻辑判断实现几秒换一下div背景即可实现闪烁的效果了。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div闪烁</title> <style type="text/css"> #box{position:absolute;top:50%;left:50%;color:#fff;width:200px;height:200px;background:red;cursor:pointer;letter-spacing:5px;text-align:center;font:12px/200px Arial;margin:-100px 0 0 -100px;} </style> <script type="text/javascript"> window.onload = function () { var oBox = document.getElementById("box"); var timer = null; oBox.onclick = function () { var i = 0; clearInterval(timer); timer = setInterval(function () { oBox.style.display = i % 2 ? "none" : "block"; i > 6 && (clearInterval(timer)) }, 80) } }; </script> </head> <body>

点击我就闪

</body> </html> </textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js实现网页标题栏的闪烁效果(示例)
js实现网页标题闪烁效果
 js实现Div闪烁效果代码
 JS函数实现网页标题(title)闪动效果
 让新消息在网页标题闪烁提示的jQuery代码
 网页标题闪烁title标题闪烁(js、jquery)
JQury slideToggle闪烁问题及解决办法
 360浏览器闪屏怎么办 360浏览器闪烁解决方法
 Jquery实现无闪烁定时刷新的代码
 CSS3中Animation为同一个元素添加多个动画效果

[关闭]

js实现Div闪烁效果代码

最近更新

浏览排行