原生javascript实现匀速运动动画效果
作者：lijiao 发布时间：2024-06-07 15:27:55
标签：javascript,匀速运动
本文向大家介绍一个javascript实现的动画。点击开始按钮div会往右移动，点击停止后，div停止移动，再点击则继续移动。请看下面代码：
<html>
<head>
<meta charset="gb2312">
<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>
效果图：
0
投稿猜你喜欢
前言PostgreSQL (也叫 Postgres)是一个自由的对象-关系数据库服务器(数据库管理系统)，它在灵活的 BSD-风格许可证下发- 这是源于两年前，当我在做人生中第一个真正意义上的网站时遇到的一个问题该网站采用前后端分离的方式，由后端的 REST 接口返回 JSON 数据
- 🌟 写在前面专栏介绍：凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目
- 今天我们来一起看看Dreamweaver MX 2004在加密FTP 传送 方面的新功能。我们一般在做
- 首先，我们需要在vue工程中安装video.js相关依赖。npm install --save video.jsnpm install --
- 本文主要介绍我在利用Django写文章时，采用的注册方法。首先说一下整体逻辑思路：•处理用户注册数据，•产生token，生成验证URL，•发
- 本文实例讲述了Python多重继承的方法解析执行顺序。分享给大家供大家参考，具体如下：任何实现多重继承的语言都要处理潜在的命名冲突， 这种冲
- Python计算器加减乘除，供大家参考，具体内容如下1、效果图2、代码# coding=utf-8import sysfrom PyQt5.
- 本文实例讲述了Python基于PyGraphics包实现图片截取功能的方法。分享给大家供大家参考，具体如下：先安安装PyGraphics包
- 我用的centos6，mysql让我整出了各种问题，我想重装一个全新的mysql，yum remove mysql-server mysql
- 最近在做游戏服务分层的时候，一直想把mysql的访问独立成一个单独的服务DBGate，原因如下: 请求收
- 在使用Python时，需要使用各种各样的库，通常会使用pip直接安装，这样最为简单也最方便。但最为崩溃的地方在于有时候速度出奇的慢，因为
- 前言:学习JavaScript的童鞋都知道,我们在发送网络请求,也就是我们在地址栏输入一个网址,就会自动跳转到当前网址,比如在浏览器网址输入
- Wingdings字体，Symbol字体<html> <head> <title>
- 实现逻辑1、Golang 版本 1.32、实现原理：1、主进程建立TCP监听服务，并且初始化一个变量 talkChan := m
- 创建SQL存储过程需要使用到的语法- 创建存储过程CREATE 存储过程的名称(参数)BEGIN...需要执行的SQL语句END- 调用CA
- python遍历字符串中的每一个字符有4种方式：1. for in ；2.iter内置函数；3.内置函数range()或xrange()；4
- 系统自带模块（库）```cppimport retarget = 'abc1234xyz're.search('(\
- 1，CSS，JS，IMG一个都不能少运行代码框<style type="text/css">&l
- 本文实例讲述了Python3使用requests包抓取并保存网页源码的方法。分享给大家供大家参考，具体如下：使用Python 3的reque
