定时器应用-点击按钮，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 ...
随机推荐
- postgres-xl 安装与部署 【异常处理】ERROR: could not open file (null)/STDIN_***_0 for write, No such file or directory
https://www.jianshu.com/p/82aaf352b772 这篇文章很不错,里面有个bug,可能是版本不对. 当前(2018-04-11)通过git 下载原代码时,在配置 pgxc ...
- 版本控制工具（上）——Git的基本使用
一.Git简介 git是什么? Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.[2] Git 是 Linus Torvalds 为了帮助管理 Linux 内 ...
- Java程序设计 第16周 课堂实践 —— 数据库3
Java程序设计 第16周 课堂实践 -- 数据库3 课堂实践任务3 查询world数据库,获得New Jessey州所有城市的总人口数. 代码分析 实现查询数据库需要我们修改MessageDAO.j ...
- 20155215 2016-2017-2 《Java程序设计》第4周学习总结
20155215 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 第六章 继承,避免多个类间重复定义共同行为.子类继承父类,再扩充(extends)其他行为. ...
- 20155229--Java实验四《Android开发基础》
20155229 Java实验四<Android开发基础> 实验内容: 任务一: Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(E ...
- 20155232 2016-2017-2 《Java程序设计》第1周学习总结
20155232 2016-2017-2 <Java程序设计>第1周学习总结 认真学习考核方式,理解成绩构成 100分构成: 翻转课堂考核12次(60分) 实验5次(15分) 团队项目(2 ...
- 2017-2018-1 20155307《信息安全技术李冬冬》实验二——Windows口令破解
2017-2018-1 <信息安全技术>实验二--Windows口令破解 所需工具: 试验系统:Windows 2003 实验工具:LC5.SuperDic 口令破解主要有两种方法:字典破 ...
- 20155307 2017-2018-2 《Java程序设计》第2周学习总结
20155307 2017-2018-2 <Java程序设计>第2周学习总结 教材学习内容总结 整数:short(2 byte).int(4 byte).long(8 byte) 字节(b ...
- 【课堂实践】Myod和Mycp
实验内容 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能 实验代码 od.java 截图 遇到的问题及解决办法 一开始想的方向是将得出的功能结果 ...
- 20155316 2016-2017-2 《Java程序设计》第1周学习总结
学习内容总结 在linux的环境下学习怎么安git.jdk.Intellj IDEA 精读教材1.2章 课前准备部分 git的学习 学习进度 系统学习学到创建版本库-廖雪峰的官方网站 git推送学到最 ...