結果を表示する
元にもどす
<html> <meta charset="utf-8"> <style> hr{border:none; border-top:1px dashed red;} </style> <form name="水平"> <input type="button"value="Start"name="ぼたん"onclick="右_移動();"> </form> <hr> <img id="目印"src="a.jpg"style="position:relative;"> <script> function 画面_横幅() {if(window.innerWidth && window.innerHeight) {横幅=window.innerWidth; 縦の長さ=window.innerHeight;} else if(document.documentElement) {if(document.documentElement.clientWidth!=0 && document.documentElement.clientHeight!=0) {横幅=document.documentElement.clientWidth; 縦の長さ=document.documentElement.clientHeight;}} else if(document.body) {横幅=document.body.clientWidth; 縦の長さ=document.body.clientHeight;} else {return[0,0];} return[横幅,縦の長さ];} 距離=0; 右に移動=2; 場所=false; 停止; function 右_移動() {if(場所) {場所=false; document.水平.ぼたん.value="スタート"; clearInterval(停止);} else {場所=true; document.水平.ぼたん.value="||■||"; 画像=document.getElementById("目印"); 停止=setInterval(function() {画像.style.left=距離+"px"; 距離+=右に移動; if(距離>画面_横幅()[0]) {距離=0;}},20);}} </script> </html>