定时器应用-点击按钮，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 ...
随机推荐
- 大数据：spark集群搭建
创建spark用户组,组ID1000 groupadd -g 1000 spark 在spark用户组下创建用户ID 2000的spark用户 获取视频中文档资料及完整视频的伙伴请加QQ群:9479 ...
- 嵌入式C语言自我修养 11：有一种函数，叫内建函数
11.1 什么是内建函数 内建函数,顾名思义,就是编译器内部实现的函数.这些函数跟关键字一样,可以直接使用,无须像标准库函数那样,要 #include 对应的头文件才能使用. 内建函数的函数命名,通常 ...
- hive的分桶
套话之分桶的定义: 分桶表是对列值取哈希值的方式,将不同数据放到不同文件中存储.对于 hive 中每一个表.分区都可以进一步进行分桶. 列的哈希值除以桶的个数来决定每条数据划分在哪个桶中.(网上其它定 ...
- 数据结构与算法之排序（1）冒泡排序 ——in dart
最经典的入门排序算法,冒泡排序,dart语言实现.数组仍然采用随机生成的数组,使用dart内置的List 的generate方法,排序前后分别打印出数组,以观察效果. import 'dart:mat ...
- 对Prolog的感想和我写的一些教程
我第一次见到Prolog这门独特的编程语言是在<七周七语言(Seven Languages in Seven Weeks)>中看到的.<七周七语言>名字看起来与市面上什么< ...
- 20155226-虚拟机与Linux之初体验
虚拟机与Linux之初体验 虚拟机的安装 虚拟机对我来说不是很了解,但今天在安装过程中加深了我的理解.虚拟机是一个在原来系统基础上进行的又一个系统安装,可以在不影响前者的情况下完成一些其不能解决的问题 ...
- 20155232 实验一《Java开发环境的熟悉》实验报告
20155232 实验一<Java开发环境的熟悉>实验报告 实验内容 使用JDK编译.运行简单的Java程序: 使用Eclipse 编辑.编译.运行.调试Java程序 实验要求 没有Lin ...
- 20145226夏艺华 《Java程序设计》实验报告二
实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步骤 (一)单元测试 ...
- PostgreSQL 使用 LDAP 认证方式
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页 回到顶级页面:PostgreSQL索引页 [作者 高健@博客园 luckyjackgao@gmail. ...
- poj 2079(旋转卡壳求解凸包内最大三角形面积)
Triangle Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 9060 Accepted: 2698 Descript ...