案例1：点击按钮摇起来
思路：
1. 2张图片，放进div里面，摇起来的本质是，此div按上下左右的位置和在一定的时间内发生移动
2. 所以用随机数的概念来实现位置的移动，用setInterval来实现一定的时间区间，前者封装在后者的处理 函数里面。最后全部作为点击按钮的点击事件的处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
img {
width: 200px;
height: 200px;
}
div {
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="点击摇起来" id="btn1" />
<input type="button" value="停止" id="btn2" />
<div id="dv">
<img src="images/tianshi.gif" />
<img src="images/bird.png" />
</div>
<script src="common.js"></script>
<script>
//div摇动起来，本质是样式里面的上下，左右，移动一个随机值 Math.ramdom
//并且在一个设定的时间区间内移动 setInterval
//点击按钮摇起来
my$("btn1").onclick = function () {
timeId = setInterval(function () {
//随机数
var x = parseInt(Math.random() * 100 + 1);
var y = parseInt(Math.random() * 100 + 1)
//设置元素的left和top属性
my$("dv").style.left = x + "px";
my$("dv").style.top = y + "px";
}, 100);
};
my$("btn2").onclick = function () {
clearInterval(timeId);
};
</script>
</body>
</html>
效果：
案例2：星星闪动
思路：
和上个案例基本是同一个原理。这里都一个对象.innerHTML在div里面创建了个span, span里面放了个星星，然后让星星在范围更大的随机数值里面移动，时间设置短一些。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 600px;
height: 600px;
border: 2px solid yellow;
background-color: black;
position: relative;
}
span {
font-size: 30px;
color: yellow;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="亮起来" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
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";
}, 100);
};
</script>
</body>
</html>
效果：
原文地址：https://www.cnblogs.com/jane-panyiyun/p/12026494.html
时间： 2024-10-31 08:23:41