定时器应用-点击按钮，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 ...
随机推荐
- Microbit蓝芽配对
Microbit蓝芽配对 (Bluetooth Pairing) Microbit 可以像手机或平板与其他蓝芽装置一样,一旦做完第一次配对完就可以使用”蓝芽服务” paired with the mi ...
- Python3 图像识别（一）
Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.环境准备: 1.Python3.x(我是用的是Python3.6.5),这个问题不大,只要3.4以上就OK. ...
- 数据结构与算法之排序（2）选择排序 ——in dart
选择排序的算法复杂度与冒泡排序类似,其比较的时间复杂度仍然为O(N2),但减少了交换次数,交换的复杂度为O(N),相对冒泡排序提升很多.算法的核心思想是每次选出一个最小的,然后与本轮循环中的第一个进行 ...
- 20155217 《Java程序设计》第三次实验报告
20155217 <Java程序设计>第三次实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)>&l ...
- 20155322 2017-2018-1《信息安全系统设计》第十周 课下作业-IPC
20155322 2017-2018-1<信息安全系统设计>课下作业-IPC 作业内容 研究Linux下IPC机制:原理,优缺点,每种机制至少给一个示例,提交研究博客的链接. 共享内存 管 ...
- day6 break continue for
.for .break (整个while循环全部结束) )打印1-100的偶数.py )打印1-100的20个偶数.py )while嵌套中的break (就近原则) .continue 错误用法: ...
- Luogu1445 [Violet]樱花
题面 题解 $$ \frac 1x + \frac 1y = \frac 1{n!} \\ \frac{x+y}{xy}=\frac 1{n!} \\ xy=n!(x+y) \\ xy-n!(x+y) ...
- 【BZOJ4008】[HNOI2015]亚瑟王
[BZOJ4008][HNOI2015]亚瑟王 题面 bzoj 洛谷 题解 由期望的线性性 可以知道,把所有牌打出的概率乘上它的伤害加起来就是答案 记第$i$张牌打出的概率为$fp[i]$ 则 $$ ...
- 源码阅读-GlobalTimer
最近看到一篇文章推了一个开源项目,GlobalTimer.主要是可以用一个定时器来统一管理多个定时任务,可以针对特定任务进行管理. 一.原理 1.一个公共的timer 2.封装任务到自定义个Event ...
- 任务队列和异步接口的正确打开方式(.NET Core版本)
任务队列和异步接口的正确打开方式 什么是异步接口? Asynchronous Operations Certain types of operations might require processi ...