<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> </ title>
</ head>
<style type = "text / css">
# box1 {
ancho: 100px;
altura : 100px;
color de fondo: rojo;
posición: absoluta;
izquierda: 0px;
}
</ style>
<script type = "text / javascript">
window.onload = function () {
// Obtener el botón
btn var btn = document. getElementById ('btn');
// Obtenga el cuadro box
var box = document.getElementById ('box1');
// Defina una variable para guardar la ID del
temporizador var timer;
// Vincula una función de controlador de eventos al botón btn
// Después de hacer clic en el botón, box1 se mueve hacia la derecha (izquierda) para aumentar
btn.onclick = function () {
// Apaga un temporizador
clearInterval (timer);
// Iniciar un temporizador para realizar efectos de animación
timer = setInterval (function () {
// Obtener el valor original izquierdo de box1
var oldValue = parseInt (getstyle (box1, 'left'));
/ / Agregar
var newValue = oldValue + 10;
// Juzgue si newValue es igual a 800
if (newValue> 800) {
newValue = 800;
}
// Establezca el nuevo valor en box1
box1.style.left = newValue + 'px ';
// Cuando el elemento se mueve a 800, haga que detenga la animación
si (newValue === 800) {
// Se alcanza el objetivo, apague el temporizador
clearInterval (timer);
}
}, 15);
}
function getstyle (obj, name ) {
if (window.getComputedStyle) {
return getComputedStyle (obj, null) [nombre];
} else {
return obj.currentStyle [nombre];
}
}
}
</script>
<body>
<button id = "btn"> 向右 移动 </button>
<br />
<br />
<div id = "box1"> </div>
</body>
< / html>
Aplicación móvil de temporizador
Supongo que te gusta
Origin www.cnblogs.com/weixin2623670713/p/12723012.html
Recomendado
Clasificación