JS---案例：点击按钮摇起来 & 星星闪动 （挺难看的）
程序员文章站
2022-08-08 15:33:04
案例1：点击按钮摇起来 思路： 1. 2张图片，放进div里面，摇起来的本质是，此div按上下左右的位置和在一定的时间内发生移动 2. 所以用随机数的概念来实现位置的移动，用setInterval来实现一定的时间区间，前者封装在后者的处理 函数里面。最后全部作为点击按钮的点击事件的处理函数
案例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" alt="" />
<img src="images/bird.png" alt="" />
</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>
效果：
上一篇： angular8 导出excel文件