This article describes the method of JS to achieve the constant flashing effect of clicking text corresponding to the DIV layer. Share it for your reference. The specific analysis is as follows:
We often see this effect on many entertainment websites. Click on the text in a square on the web page, and then the entire square keeps flashing. It is a very good dynamic effect and can easily attract customers' attention. This code realizes this effect. After clicking on a square, the square will flash.
Copy the code as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js realizes clicking text corresponding to DIV layer flashing</title>
<style type="text/css">
#box{position:absolute;top:50%;left:50%;color:#ffff;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>
<div id="box">Wulin.com reminds: If you dare to click on me, I dare to flash</div>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.