<!DOCTYPE html>
<html>
<head>
<meta cahrset = "utf-8">
<title>滾動小球</title>
<style type = "text/css">
* {
margin : 0px;
padding : 0px;
}
#btn {
position : absolute;
top : 200px;
left : 20px;
}
#smallBall {
width : 100px;
height : 100px;
line-height : 100px;
text-align : center;
/* border : 1px solid black */
border-radius : 100%;
background-color : #ff0000;
position : absolute;
top : 50px;
left : 0px;
}
</style>
</head>
<body>
<div id="smallBall">小球</div>
<button id="btn">滾動小球</button>
<script type = "text/javascript">
var btn = document.getElementById("btn");
var smallBall = document.getElementById("smallBall");
var speed = 10;
var x = true;
btn.onclick = function() {
var time = setInterval(run, 30);
function run() {
if (smallBall.offsetLeft == "0") {
x = true;
} else if (smallBall.offsetLeft == "600") {
x = false;
}
if(x == true) {
smallBall.style.left = smallBall.offsetLeft + speed + "px";
} else {
smallBall.style.left = smallBall.offsetLeft - speed + "px";
}
}
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/32084.html
標籤：JavaScript
上一篇：vue專案之配置本地，測驗，生產環境，配置axios.defaults.baseURL，解決跨域問題
下一篇：縮放后的拖拽問題