<！DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> </ title>
</ head>
<style type = "text / css">
＃box1 {
width：100px;
height ：100px;
background-color：red;
position：absolute;
left：0px;
}
</ style>
<script type = "text / javascript">
window.onload = function（）{
// Get btn button
var btn = document。 getElementById（ 'btn'）;
//ボックスボックスを取得する
var box = document.getElementById（ 'box1'）;
//タイマーIDを保存する変数を定義する
var timer;
//イベントハンドラー関数をbtnボタンにバインドします
// ボタンをクリックした後、
box1 は右（左）に移動してbtn.onclick = function（）{
//タイマーを閉じます
clearInterval（timer）;
//アニメーション効果を実行するタイマーを開始
timer = setInterval（function（）{
//
box1 の元の左の値を取得var oldValue = parseInt（getstyle（box1、 'left'））;
/ / Add
var newValue = oldValue + 10;
// newValueが800に等しいかどうかを判断します
if（newValue> 800）{
newValue = 800;
}
//新しい値を
box1に設定しますbox1.style.left = newValue + 'px ';
//要素が800に移動したときにアニメーションを停止します
if（newValue === 800）{
//目標に達したら、タイマーをオフにします
clearInterval（timer）;
}
}、15）;
}
function getstyle（obj、name ）{
if（window.getComputedStyle）{
return getComputedStyle（obj、null）[name];
} else {
return obj.currentStyle [name];
}
}
}
</ script>
<body>
<button id = "btn">向右移动</ button>
<br />
<br />
<div id = "box1"> </ div>
</ body>
< / html>
タイマーボックスのモバイルアプリ
おすすめ
転載: www.cnblogs.com/weixin2623670713/p/12723012.html
おすすめ
ランキング