定时器应用-点击按钮，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 ...
随机推荐
- python教程（三）·函数进阶（上）
在介绍了函数定义的方法后,再来介绍一些进阶知识 参数收集 有时候我们需要参数的数量是任意的,比如print函数的参数的数量是任意的,print函数的内部实现我们不探究,但是单单是参数数量可变这一方面实 ...
- python获取网页编码问题（encoding和apparent_encoding）
在requests获取网页的编码格式时,有两种方式,而结果也不同,通常用apparent_encoding更合适 注:推荐一个大佬写的关于获取网页编码格式以及requests中text()和conte ...
- python学习笔记（三）：numpy基础
Counter函数可以对列表中数据进行统计每一个有多少种 most_common(10)可以提取前十位 from collections import Counter a = ['q','q','w' ...
- 20155313 实验二《Java面向对象程序设计》实验报告
20155313 实验二<Java面向对象程序设计>实验报告 一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. ...
- 20155317 2016-2017-2《Java程序设计》课程总结
20155317 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 新玮的首发博客:对师生关系的期望. C语言与java 20155317 王新玮第二次:语言掌握调查 ...
- 20155319 2016-2017-2 《Java程序设计》第四周学习总结
20155319 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 ==继承== 6.1.1 继承共同行为 定义:继承基本上就是避免多个类间重复定义共同行为. ...
- 20155332 2006-2007-2 《Java程序设计》第3周学习总结
学号 2006-2007-2 <Java程序设计>第3周学习总结 教材学习内容总结 尽量简单的总结一下本周学习内容 尽量不要抄书,浪费时间 看懂就过,看不懂,学习有心得的记一下 教材学习中 ...
- WPF MVVM从入门到精通3：数据绑定
原文:WPF MVVM从入门到精通3:数据绑定 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 WPF ...
- jsp+servlet+javabean开发web项目
一.介绍: 项目依赖包:jdbc数据库包 jsp+servlet+javabean开发web项目,是最接近web项目原生运行原理的. 但是,jsp内容混乱,项目结构复杂时,代码会混乱 二.运行原理: ...
- 关于解决idea 输入法不跟随问题
网上查了很多方法 自己试验了一种方式 jdk版本采用的是 java version "1.8.0_191"Java(TM) SE Runtime Environment (bui ...