标签:attribute ble value || attr htm number get ===
//css代码
<style> | |
div{ | |
width: 100px; | |
height: 100px; | |
background-color: brown; | |
position: absolute; | |
} | |
</style> | |
</head> | |
<body> | |
<button>移动</button> | |
<div style="top: 30px;left:8px"></div> | |
<script> | |
let btn = document.getElementsByTagName("button")[0];//获取按钮 | |
let div = document.getElementsByTagName("div")[0];//获取移动的div | |
let switchDirX = ‘on‘, switchDirY = ‘on‘;//设置两个标识来跟踪x,y轴的运动情况 | |
let move = function(){ | |
let divLeft = parseInt(div.style.left);//将获取到的left值取整。去除后面的px单位 | |
let divTop = parseInt(div.style.top);//将获取到的top值取整,去除后面的px单位 | |
//x轴运动 | |
if(divLeft<innerWidth - 100 && switchDirX === ‘on‘){ | |
div.style.left = divLeft + 1 + "px"; | |
} | |
else if(divLeft === innerWidth - 100 || switchDirX === ‘off‘){ | |
switchDirX = ‘off‘; | |
div.style.left = divLeft - 1 + "px"; | |
if(divLeft === 0){ | |
switchDirX = ‘on‘; | |
} | |
} | |
//y轴运动 | |
if(divTop<innerHeight - 100 && switchDirY === ‘on‘){ | |
div.style.top = divTop + 1 + "px"; | |
} | |
else if(divTop === innerHeight - 100 || switchDirY === ‘off‘){ | |
switchDirY = ‘off‘; | |
div.style.top = divTop - 1 + "px"; | |
if(divTop === 0){ | |
switchDirY = ‘on‘ | |
} | |
} | |
} | |
btn.onclick = function(){ | |
if (btn.innerHTML === "移动"){ | |
btn.innerHTML = "暂停"; | |
stopTimer = setInterval(move,0.00000000001); | |
} | |
else{ | |
btn.innerHTML = "移动"; | |
clearInterval(stopTimer); | |
} | |
} | |
</script> |
标签:attribute ble value || attr htm number get ===
原文地址:https://www.cnblogs.com/gao2/p/11427629.html