定时器应用-点击按钮，div向右移动
需求是点击button，div就一直往右移动，给个条件left=800px就停止移动，通过定时器来控制。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background: red;
/*因为在IE浏览器中如果没有指定的值，就默认auto，所以我们需要先指定一个值*/
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){ //获取元素的值
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name]
}
else{
return obj.currentStyle[name]
}
}
//需求是点击button，div就一直往左移动
btn = document.getElementById("btn");
box1 = document.getElementById("box1");
var timer;
btn.onclick = function(){ //清除上一个定时器
clearInterval(timer);
//开启一个定时器，用来执行动画效果
setInterval(function(){
//获取box1原来的left值，通过复用的函数去获取,parseInt是把字符串的数字部分转换为number var oldlvalue = parseInt(getStyle(box1,"left"));
newvalue = oldlvalue + 10;
if(newvalue>800){
newvalue = 800;
}
box1.style.left = newvalue + "px";
/*
* 控制移动的位置，当800px时，就停止移动
*/
if(newvalue === 800){
clearInterval(timer);
}
},3000)
}
}
</script>
</head>
<body> <button id="btn">点击div向右移动</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
希望可以坚持学习新的，这也是作为一个复习，到时候要回顾一看便知，多谢支持！
定时器应用-点击按钮，div向右移动的更多相关文章
- 前端切图|点击按钮div变色
<!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta c ...
- 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
- js点击按钮div显示，点击div或者body和按钮，div隐藏
var box = document.getElementById("box"); var btn = document.getElementById("btn" ...
- 点击按钮div显示，点击div或者document，div隐藏
$("button").click(function(event){ event.stopPropagation(); if($("div").is(':hid ...
- JS---案例：点击按钮设置div背景色渐变
案例:点击按钮设置div背景色渐变 背景色渐变:设置透明度 <div id="dv"></div> <input type="button& ...
- React 点击按钮显示div与隐藏div，并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- 点击按钮弹出一个div层
JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
- 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
随机推荐
- STM32 HAL库学习系列第6篇---定时器TIM 级联配置
应用情景 使用定时器配置编码器模式,发现STM32只有两个定时器是32位,16位的测量值不够用,发现是可以使用两个16位定时器级联为32位的. 我是在使用编码器计数电机转速时使用,但是最终实现的效果不 ...
- s3c2440存储控制器详解
从上图可知,外部内存类的设备与存储管理器相连,那么CPU是怎样访问到内存的呢?通过存储管理器.CPU比较单纯,只会按照指令执行,CPU只负责发出地址,怎样找到内存类设备呢?这些都交给存储管理器来管理. ...
- C语言 经典编程100
一.题目 [程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去掉不满足条件 ...
- 中国大学MOOC-JAVA学习（浙大翁恺）—— 时间换算
import java.util.Scanner; public class Main { public static void main(String[] args) { // TODO Auto- ...
- C语言/C++对编程学习的重要性！
C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...
- 20155202张旭 2016-2017-2 《Java程序设计》第2周学习总结
20155202张旭 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第一,二章知识小节: git log 命令来查看 :提交历史 查看当前所处位置: pwd ...
- 20155318 2016-2017-2《Java程序设计》课程总结
20155318 2016-2017-2<Java程序设计>课程总结 每周作业链接 预备作业1:亦师亦友--我所期望的师生关系,对专业的认识与期望等 预备作业2:没有了自主,学习的小船说翻 ...
- 20155321 2016-2017-2 《Java程序设计》第三周学习总结
20155321 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 4.1 类与对象 定义类用class关键字,建立实例用new关键字 一个原始码中可有多个类定 ...
- [cogs347]地震
COGS:地震(平衡树) COGS上一道题...文件名是equake 还是又打了一遍板子... 加个lazy标记就行了... 注意查询时先下传标记(lazy) // It is made by XZZ ...
- angular 缓存模板 ng-template $templateCache
由于浏览器加载html模板是异步加载的,如果加载大量的模板会拖慢网站的速度,这里有一个技巧,就是先缓存模板. 使用angular缓存模板主要有三种方法: 方法一:通过script标签引入 <sc ...