zoukankan      html  css  js  c++  java
  • (36)JS运动之使物体向右运动

    基本思路:样式要是绝对定位,不然的话根本走不起来。当开启一个定时器的时候。必须先清除定时器。这是为了防止鼠标连续点击button而开启多个定时器,导致物体的速度加快等原因,其次要控制好物体的运动和停止。用if-else控制逻辑控制。

    <!DOCTYPE HTML>
    <!--
    	
    -->
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #div1{
    	200px;
    	height:200px;
    	background:red;
    	position:absolute;//不加绝对定位,就跑不起来
    	top:50px;
    	left:0px;
    }
    
    </style>
     
    
    <script>
    var timer=null;
    function startMove(){
    	var oDiv=document.getElementById('div1');	
    	
    	clearInterval(timer);//保证仅仅有一个定时器在工作,不会由于连续点击多次按钮而开启多个定时器,从而导致速度变快
    	timer=setInterval(function (){
    	var speed=1;
    	
    	if(oDiv.offsetLeft>=300)//大于300时让物体停在那里,不一直运动下去
    	{	
    		clearInterval(timer);
    	}
    	else
    	{
    		oDiv.style.left=oDiv.offsetLeft+speed+'px';
    	}
    	
    	},30)
    
    }
    </script>
    </head>
    <body>
    	<input id="btn1" type="button" value="開始运动" onclick="startMove()"/>
    	<div id="div1"></div>
    
    </body>
    </html>

    效果图:


  • 相关阅读:
    javaTemplates-学习笔记三
    索引
    WTForms
    session权限限制
    vue-cli脚手架项目中组件的使用
    vue补充
    表单输入绑定
    vue指令系统介绍
    vue-cli脚手架安装和webpack-simple模板项目生成
    rest-framework之视图
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5248534.html
Copyright © 2011-2022 走看看