今天做练习的时候碰到了一道题,题目是初识打开页面时,小球显示文字为“单击移动”,点击小球后,小球文字变为“单击停止”并停止移动。以下是我用js来实现的代码。
效果图:
写题思路:
CSS样式:设置小球的样式为圆形
HTML代码:设置一个id为one的div元素来充当小球
JavaScript代码:小球移动移动主要是通过js代码来控制小球(div元素)距离左边的距离来实现的。通过点击来触发小球的事件,在事件中使用间隔调用控制小球与左边的距离,从而实现小球的移动。取消间隔移动来实现小球的停止
实现代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
border: 1px solid red;
width: 200px;
height: 200px;
border-radius: 50%;//边框圆角
text-align: center;//实现文字水平居中
line-height: 200px;//实现文字垂直居中
position: absolute;
}
</style>
</head>
<body>
<div id="one" onclick="f1()">单击移动</div>
<script>
var div_ball = document.getElementById("one");
var i=0;
var flag = null;
function f1(){
if (div_ball.innerHTML == "单击移动") {
div_ball.innerHTML = "单击停止";
flag = setInterval(function () {
i += 4;//小球每次偏移的距离
div_ball.style.left = i + "px";
}, 80);
} else {
div_ball.innerHTML = "单击移动";
//取消间隔调用
clearInterval(flag);
}
}
</script>
</body>
</html>