JS实现静止元素自动移动示例


Posted in Javascript onApril 14, 2014

一个元素是静止的,使它在屏幕上实现自动移动。

这是一个比较简单问题,在学习中遇到了,把它写了下来。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<style> 
#sp1{ 
border: red solid ; 
display: inline-block; 
width: 30px; 
height: 20px; 
font-size: 20px; 
text-align: center; 
} 
</style> 
<script> 
var timenum; 
var mar=0;//控制移动量的变量 
var flag = 0;//实现控制左右移动的一个变量 
//实现向右移动的函数 
function moveright(){ 
sp1.style.marginLeft=mar+"px"; 
mar=mar+5; 
} 
//实现向右移动的函数 
function moveleft(){ 
sp1.style.marginLeft=mar+"px"; 
mar=mar-5; 
} function go() { 
var sp1 =document.getElementById("sp1"); 
var btn1 = document.getElementById("start"); 
if(!btn1.disabled){ 
btn1.disabled = true; 
document.getElementById("pause").disabled=false; 
} 
sp1.innerHTML=parseInt(sp1.innerHTML)+1; 
timenum = window.setTimeout(go,10); 
if(flag==1){ 
window.setTimeout(moveleft,10); 
} 
if(flag==0){ 
window.setTimeout(moveright,10); 
} 
if(mar>(window.outerWidth)){ 
flag=1; 
} 
if(mar<0){ 
flag=0; 
} 
} 
function stop(){ 
document.getElementById("start").disabled = false; 
document.getElementById("pause").disabled=true; 
window.clearTimeout(timenum); 
} 
</script> 
</head> 
<body> 
<button id="start" <button id="pause" disabled>暂停</button> 
<br/> 
<span id="sp1">0</span> 
</body> 
</html>
Javascript 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
vue中如何使用ztree
Feb 06 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
js 获取元素下面所有li的两种方法
Apr 14 #Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 #Javascript
jquery使用jxl插件导出excel示例
Apr 14 #Javascript
js 获取input点选按钮的值的方法
Apr 14 #Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 #Javascript
Js实现动态添加删除Table行示例
Apr 14 #Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 #Javascript
You might like
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
express express-session的使用小结
2018/12/12 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
餐饮收银员岗位职责
2014/02/07 职场文书
小学教师评语大全
2014/04/23 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电