41 lines
1.2 KiB
HTML
41 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript">
|
|
window.onload = function(){
|
|
var im = document.getElementById('im')
|
|
//定时器叠加问题
|
|
var timer = null
|
|
document.getElementById('btn').onclick = function(){
|
|
im.style.position = 'absolute'
|
|
clearInterval(timer)
|
|
//创建定时器 不断地改变坐标
|
|
timer = setInterval(function(){
|
|
//改变坐标 改变数值 每一次生成一个数值 Math.random随机数
|
|
//10-100之间随机数
|
|
//a-b之间随机小数
|
|
//公式 Math.random()*(b-a+1) + a
|
|
//a-b之间随机整数
|
|
// parseInt(Math.random()*(b-a+1) + a)
|
|
var x = parseInt(Math.random()*90 + 10)
|
|
var y = parseInt(Math.random()*90 + 10)
|
|
im.style.left = x + 'px'
|
|
im.style.top = y + 'px'
|
|
|
|
},200)
|
|
}
|
|
document.getElementById('btn1').onclick = function(){
|
|
//清除定时器 定时器id?
|
|
clearInterval(timer)
|
|
}
|
|
}
|
|
</script>
|
|
<input type="button" name="" value="图片摇动" id="btn">
|
|
<input type="button" name="" value="停止摇动" id="btn1">
|
|
<img src="images/1.jpg" id="im">
|
|
</body>
|
|
</html> |