定时器应用-点击按钮，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 ...
随机推荐
- 单片机中不带字库LCD液晶屏显示少量汉字
单片机中不带字库LCD液晶屏如何显示少量汉字,一般显示汉字的方法有1.使用带字库的LCD屏,2.通过SD 卡或者外挂spi flash存中文字库,3.直接将需要的汉字取模存入mcu的flash中. 第 ...
- 003.2---asyncio模块(上)
asyncio(上) asyncio 的几个概念 event_loop(事件循环):程序开启一个无线的循环,程序员会把一些函数(协程)注册到事件循环上,当满足事件发生的时候,调用相应的协程函数. co ...
- scala (8) 模糊匹配
object MatchDemo { /** * 定义偏函数用PartialFunction来表示 * PartialFunction[T1,T2]要求传入一个参数T1,T2代表返回的类型. * 偏函 ...
- freeradius+xl2tp+mysql整合
freeradius+xl2tp+mysql整合 搭了5个小时,可以说是入门到精通了.首先请确认你已经搭建好L2TP,并可以正常使用. 如何在Ubuntu下配置L2TP VPN L2TP使用radi ...
- 论 Python Opencv 中文路径及中文文件名图像文件读取的两种方式
python 2中对于中文字符的处理可谓是诟病已久,虽然python 3 使用统一编码解决了中文字符串的问题,但在使用opencv中imread函数读取中文路径图像文件时仍会报错. 1) 借助nump ...
- 20155211实验二 Java面向对象程序设计
20155211实验二 Java面向对象程序设计 实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了 ...
- 20155333 2016-2017-2《Java程序设计》课程总结
20155333 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:你期望的师生关系是什么? 预备作业2:体会做中学(Learing By Doi ...
- 同步备份工具之 rsync
1.常用同步方法 SCP. NFS. SFTP. http. samba. rsync. drbd(基于文件系统同步,效率高) 2.rsync 介绍 rsync,英文全称是 remote synchr ...
- 阿里云Ubuntu 14.04 + Nginx + .net core + MySql
前段时间帮朋友写了一个网站,现在做一个记录. .Net Core 安装: curl https://packages.microsoft.com/keys/microsoft.asc | gpg -- ...
- 接口自动化之接口工具选取(jmeter)
jmeter进行接口测试,网上简易教程很多 其实关于HTTP接口测试的实现,网上还有很多其他工具诸如:http在线请求测试/谷歌插件postman/火狐插件等. 至于选择jmeter的原因,其实没有原 ...