原生javascript实现的一个简单动画
时间:2015-12-26
本文章向大家介绍一个javascript实现的动画。点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动。请看下面代码。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<head>
<title>javascript实现的简单动画</title>
<style type="text/css">
#mydiv
{
width:50px;
height:50px;
background-color:green;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var mydiv=document.getElementById("mydiv");
var start=document.getElementById("start");
var stopmove=document.getElementById("stopmove");
var x=0;
var flag;
function move()
{
x=x+1;
mydiv.style.left=x+"px";
}
start.onclick=function()
{
clearInterval(flag);
flag=setInterval(move,20);
}
stopmove.onclick=function()
{
clearInterval(flag);
}
}
</script>
<body>
<input type="button" id="start" value="开始运动" />
<input type="button" id="stopmove" value="停止运动" />
<div id="mydiv"></div>
</body>
</html>
代码解释:
- window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
- var mydiv=document.getElementById("mydiv"),获取id属性值为mydiv的元素。
- var start=document.getElementById("start"),获取id属性hi为start的元素。
- var stopmove=document.getElementById("stopmove"),获取id属性值为stopmove的元素。
- mydiv.style.left=x+"px",设置div的left属性值。
- start.onclick=function(){},为start元素注册onclick事件处理函数。
- clearInterval(flag),停止定时器函数,一方多次单击开始按钮造成叠加效果。
- flag=setInterval(move,20),开始运动。
- 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(3)
- 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)
- 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(1)
- element-ui el-input只显示下划线
- 怎样去阅读源码,这篇文章值的你一读
- HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换
- Mybatis 3 配置 Log4j
- 基于Three.js的360度全景--photo-sphere-viewer--简介
- MyBatis3-配置使用log4j输出日志
- nginx支持跨域访问
- nginx静态资源文件无法访问,403 forbidden错误
- vue.js如何在标签属性中插入变量参数
- SpringBoot解决ajax跨域问题
- WebBrowser(IE) 与 JS 相互调用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- RTOS内功修炼记(六)—— 任务间通信为什么不用全局变量?
- 程序员必备基础:加签验签
- 【Rust日报】2020-07-16 j4rs,一个在 Rust 中调用 Java 代码的 Crate
- Vue.js 3 正式进入 RC 阶段
- FeignClient注解及参数问题---SpringCloud微服务
- Rust FFI 编程 - Rust导出共享库01
- 【每周一库】 see - An HTTP server for hosting static files
- 【Rust日报】2020-07-17 无船同志新博客:Shipping Const Generics in 2020
- SpringCloud--Config Server配置中心学习总结
- 【Rust日报】2020-07-18 提升ARM64 Linux平台支持到Tier-1
- SpringCloud+MyBatis(oracle)逆向工程自动生成代码
- JDK1.8的几个简单Lambda表达式
- 腾讯云直播开发日记 (一) 直播播放和观看
- Docker六脉神剑(二) 使用Docker构建lnmp开发环境
- redis主从配置+集群搭建