JS基础学习:定时器案例
2019-04-08 本文已影响0人
Merbng
星星
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<style type="text/css">
div {
width: 600px;
height: 500px;
border: 2px solid yellow;
background-color: black;
position: relative;
}
span {
font-size: 30px;
color: yellow;
position: absolute;
}
</style>
</head>
<body>
<input type="button" name="" id="btn" value="亮起来" />
<div id="dv"></div>
<script src="js/common.js"></script>
<script type="text/javascript">
my$('btn').onclick = function() {
setInterval(function() {
my$('dv').innerHTML = "<span></span>";
var x = parseInt(Math.random() * 600 + 1);
var y = parseInt(Math.random() * 600 + 1);
my$('dv').firstElementChild.style.left = x + "px";
my$('dv').firstElementChild.style.top = y + "px";
}, 200);
};
</script>
</body>
</html>
图片摇起来
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
</head>
<style type="text/css">
img {
width: 200px;
height: 200px;
}
div {
position: absolute;
}
</style>
<body>
<input type="button" name="" id="btn1" value="摇起来" />
<input type="button" name="" id="btn2" value="停止" />
<div id="dv">
<img src="../img/ercode.png">
<img src="../img/ercode.png">
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
var interId = "";
my$('btn1').onclick = function() {
interId = setInterval(function() {
var x = parseInt(Math.random() * 100 + 1);
var y = parseInt(Math.random() * 100 + 1);
my$('dv').style.left = x + "px";
my$('dv').style.top = y + "px";
}, 100)
};
my$('btn2').onclick = function() {
clearInterval(interId);
};
</script>
</body>
</html>
美女时钟
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="im" src="">
<script src="js/common.js"></script>
<script>
function f1() {
var dt = new Date();
var hour = dt.getHours();
hour = hour < 10 ? "0" + hour : hour;
var second = dt.getSeconds();
second = second < 10 ? "0" + second : second,
my$('im').src = "meimei/" + hour + "_" + second + ".jpg";
}
f1();
setInterval(f1, 1000);
</script>
</body>
</html>
