定时器应用-点击按钮，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 ...
随机推荐
- 课下实践——实现Mypwd
实现Mypwd 学习pwd命令 想要知道当前所处的目录,可以用pwd命令,该命令显示整个路径名. L 目录连接链接时,输出连接路径 P 输出物理路径 研究pwd实现需要的系统调用(man -k; gr ...
- 20155212 实验一《Java开发环境的熟悉》实验报告
20155212 实验一<Java开发环境的熟悉>实验报告 命令行下Java程序开发 命令创建实验目录 输入mkdir 2051212创建以自己学号命名的文件夹,通过cd 20155212 ...
- 2016-2017-2 《Java程序设计》第二周学习总结
20155319 2016-2017-2 <Java程序设计>第二周学习总结 课堂学习内容 git:版本控制 java -d bin(当地文件夹) src/Hello.java把生成的.c ...
- 20155336 2016-2017-2《JAVA程序设计》第二周学习总结
20155336 2016-2017-2 <JAVA 程序设计>第二周学习总结 教材学习内容 1: GIT版本检测 2: JAVA中基本类型 整数 字节 浮点数 字符 布尔(▲) 通过AP ...
- BZOJ4049][CERC2014]Mountainous landscape-[线段树+凸包+二分]
Description 现在在平面上给你一条折线P1P2P3...Pn. x坐标是严格单调递增的.对于每一段折线PiPi+1,请你找一个最小的j,使得j>i且走在PiPi+1的人能看到折线PjP ...
- 有关Laravel 4 的 Homestead 安装部署的细节
对于Vagrant,我是相见恨晚的.有时候抽出几个小时的时间学会一种工具,对于将来可以节省几十甚至几百小时的时间. Vagant最大的好处就是节省了安装配置运行环境的时间,统一开发环境,同时可以最大限 ...
- javaweb(二十三)——jsp自定义标签开发入门
一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 packag ...
- 180716-Centos时区设置
使用timedatectl命令同步时间并设置时区 I. timedatactl命令 1. 使用帮助 timedatectl -h 2. 命令示例 2.1 显示系统的当前时间和日期 timedatect ...
- mysql增删改查、连表查询、常用操作
一.建表 1.最简单的建表CREATE TABLE user(id int,name char(20),age int); 2.带主键带注释和默认值创建表CREATE TABLE user(id I ...
- thinkphp5登录并保存session、根据不同用户权限跳转不同页面
本文讲述如何在thinkphp5中完成登录并保存session.然后根据不同的用户权限跳转相应页面功能的实现.我也在学习thinkphp源码的路上,记录一下并与大家分享.完成该步骤主要有以下三个步骤完 ...