微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

原生javascript实现的一个简单动画

php中文网
发布： 2016-06-01 09:54:53
原创
1827人浏览过

<code class="html"><!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></code>
登录后复制

在线运行

代码解释：

原生js实现简单的一款倒计时计时插件
原生js实现简单的一款倒计时计时插件

原生js实现简单的一款倒计时计时插件下载。基于原生JavaScript编写的一款通用倒计时计时插件，精确到毫秒，简单实用。

原生js实现简单的一款倒计时计时插件 253
查看详情 原生js实现简单的一款倒计时计时插件
  1. window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
  2. var mydiv=document.getElementById("mydiv")，获取id属性值为mydiv的元素。
  3. var start=document.getElementById("start")，获取id属性hi为start的元素。
  4. var stopmove=document.getElementById("stopmove")，获取id属性值为stopmove的元素。
  5. mydiv.style.left=x+"px"，设置div的left属性值。
  6. start.onclick=function(){}，为start元素注册onclick事件处理函数。
  7. clearInterval(flag)，停止定时器函数，一方多次单击开始按钮造成叠加效果。
  8. flag=setInterval(move,20)，开始运动。

相关标签：
js

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：form 表单中onsubmit()与submit()区别 下一篇：js form表单onsubmit事件用法详解
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript类型检查_TypeScript接口设计 TypeScript的接口用于定义对象结构，支持属性、方法、函数类型约束、类实现及接口继承。通过静态类型检查提升代码质量与开发效率。
2025-11-19 08:58:31
767
JavaScript游戏开发_物理引擎集成与优化 选择适合的物理引擎并正确集成可显著提升JavaScript游戏的真实感与交互性。Matter.js轻量易用，适合2D益智或平台类游戏；Box2D通过WebAssembly提供高精度物理模拟，适用于对真实性要求高的项目；p2.js支持复杂多边形碰撞与约束系统，适合机械或车辆模拟。以Matter.js为例，首先引入库文件，创建引擎和渲染器，添加刚体对象到世界中，再启动引擎与渲染即可实现基本物理效果。为保证性能，应控制活动物体数量、简化碰撞形状、使用固定时间步长、合理设置求解器迭代次数，并及时清理废弃
2025-11-19 08:24:50
488
JavaScript事件系统_自定义事件分发 通过CustomEvent和dispatchEvent可实现JavaScript自定义事件，用于组件间解耦通信。首先创建携带数据的事件对象，再分发到指定元素，其他模块通过addEventListener监听该事件并获取数据，适用于表单与图表等跨模块交互场景。
2025-11-19 08:09:02
845
代码拆分：React.lazy与Suspense实现 React.lazy与Suspense可实现组件动态加载，减少初始包体积，提升首屏性能；通过import()动态引入组件，Suspense包裹并设置fallback加载提示，结合ReactRouter实现路由级代码拆分，配合ErrorBoundary处理加载失败，保障用户体验完整。
2025-11-19 07:23:34
790
JavaScript_消息队列与事件驱动架构 JavaScript通过消息队列和事件循环实现异步编程，消息队列暂存异步回调，事件循环在调用栈为空时将任务依次推入执行，微任务优先于宏任务，事件驱动架构则通过监听用户或系统事件触发回调，两者协同确保异步任务有序执行且不阻塞主线程。
2025-11-19 04:21:35
377
JavaScript错误处理_Try_Catch最佳实践 答案：合理使用try-catch需精准捕获可预期错误，如JSON解析或外部数据处理，避免包裹大段代码；在catch中通过error.name区分SyntaxError、TypeError等并分类处理，保留堆栈信息且不暴露敏感细节；异步操作中结合async/await与try-catch或Promise的.catch()确保异常被捕获，同时记录上下文日志并上报监控系统。
2025-11-19 02:37:21
392
ApexCharts在React Flexbox布局中的响应式调整与多图表集成 本文深入探讨了在React应用中将ApexCharts集成到Flexbox布局时常见的尺寸调整问题，特别是图表高度在窗口缩放时显示异常。核心解决方案在于确保图表容器拥有适当的弹性高度，并正确配置ApexCharts组件的尺寸属性。此外，文章还提供了在React中有效渲染多个ApexCharts实例的正确方法，避免了常见的组件结构错误，旨在帮助开发者构建响应式且功能丰富的仪表盘。
2025-11-18 23:28:00
684
JavaScript Canvas游戏开发：修复不显示的常见问题与调试指南 本文旨在解决JavaScript游戏在HTMLCanvas中无法正常显示的问题。核心原因通常包括Canvas元素未正确获取、关键变量（如帧计数器）未声明以及随机数生成等辅助函数实现不当。教程将详细介绍如何初始化Canvas上下文、定义必要变量和函数，并强调利用浏览器控制台进行调试的重要性，帮助开发者构建流畅的Canvas游戏体验。
2025-11-18 23:06:01
594
Phaser教程：向游戏对象组添加新子元素 Phaser中的游戏对象组（Group）是管理和操作多个游戏对象集合的关键工具。本文将详细介绍如何使用Group对象的create()方法，在运行时高效地创建并向组中添加新的子元素，涵盖其基本用法、参数配置以及在不同类型组（如普通游戏对象组和物理组）中的应用，以优化游戏场景管理。
2025-11-18 22:47:25
472
JavaScript数组浅比较优化实践 本文探讨了在JavaScript中高效进行数组浅比较的方法。从传统的基于循环的比较方式入手，逐步过渡到利用Array.prototype.every()方法实现更简洁、函数式风格的解决方案。文章详细阐述了两种方法的实现逻辑、代码示例及其在实际应用中的考量，并强调了浅比较与深比较的区别与适用场景。
2025-11-18 22:18:18
534
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部