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

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

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


代码如下:

<!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>

赞 (0)

相关推荐

  • Javascript实现数组中的元素上下移动

    前言 我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例.写起来也没有没麻烦,无非是交换数组元素.最终实现代码如下,比较重要的是那个函数. 示例代码: // 交换数组元素 var swapItems = function(arr, index1, index2) { arr[index1] = arr.splice(index2, 1, arr[index

  • JavaScript如何实现组合列表框中元素移动效果

    首先给大家说下组合框和列表框的区别: 组合框包括列表框和文本框的功能 文本框:只能输入数据 列表框:只能选择数据 组合框:既能输入数据,又能选择`` 应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 . 实现的基本思想: (1)编写init方法对两个列表框进行初始化: (2)为body添加onload事件调用init方法: (3)编写move(s1,s2)把s1中选中的选项移到s2; (4)编写moveAll(s1,s2)把s1中所有的选项都移到s2. (5)为按钮添

  • JavaScript Select和Option列表元素上下左右移动

    JavaScript Select和Option列表元素上下左右移动

    作者 马嘉楠 New Document var currentSel = null; function move(){ if(arguments.length==1){ moveUp(arguments[0]); }else if(arguments.length==2){ moveRight(arguments[0],arguments[1]); } } function moveUp(direction){ if(currentSel == null) return; var index =

  • JS实现元素上下左右移动效果

    本文实例为大家分享了JS实现元素上下左右移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { cursor: pointer; } #cell { width: 30px; height: 30px;

  • JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的.且每次元素都是对齐到网格的. 先根据demo说明一下思路和细节,后面会给出demo代码. 1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px.铺上一层网格背景是为了帮助我们更好的看到效果

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

    一个元素是静止的,使它在屏幕上实现自动移动. 这是一个比较简单问题,在学习中遇到了,把它写了下来. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> #sp1{ bo

  • JS简单实现元素复制示例附图

    JS简单实现元素复制示例附图

    源代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312

  • vuejs2.0运用原生js实现简单的拖拽元素功能示例

    vuejs2.0运用原生js实现简单的拖拽元素功能示例

    整理文档,搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例,留作笔记. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta

  • js获取下拉列表的值和元素个数示例

    js获取下拉列表框元素的个数 复制代码 代码如下: <!DOCTYPE html><html><head><script>function getLength(){alert(document.getElementById("mySelect").length);//元素个数}</script></head><body> <form><select id="mySelect&

  • JS鼠标滚动分页效果示例

    JS鼠标滚动分页效果示例

    首先先看问题: 在开发的时候,看到这种现象 就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢. 解决办法就是进行分页,但是在项目中用到的插件,不能控制样式,改变分页的宽度,样式就会乱掉.最简单的办法就是不分页(^_^) 但是既然是自己份内的事,为啥不做好呢?那就写分页呗,滚动分页! 问了其他同事,其他同事也...你去百度去.... 是啊,网上一大堆 ,但都是乱七八糟的,也没有效果图...坑 经过一番思考,和百度 思路来了: 需要了解三个dom元素,

  • JS获取html元素的标记名实现方法

    常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象.使用的时候请注意区分大小写. 它是document对象特有的函数,只能通过其来调用该方法.其使用的方法如下: document.getElementById('demo') //demo是元素对应的ID 该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用. getElementsBy

  • 浅谈js的html元素的父节点,子节点

    parentNode和parentElement功能一样,childNodes和children功能一样.但是parentNode和childNodes是符合W3C标准的,可以说比较通用.而另外两个只是IE支持,不是标准,Firefox就不支持 示例: "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ,如下: <div id="parent"> <b id="child

  • js实现磁性吸附的示例

    磁性吸附 目录 代码实例 与限定范围拖拽的差异 下载源码链接 代码实例 * { padding: 0; margin: 0; } #box1 { width: 500px; height: 500px; background: #999; position: relative; left: 100px; top: 100px; } #box { width: 100px; height: 100px; background: #334; position: absolute; cursor: m

  • js实现自定义滚动条的示例

    自定义滚动条 目录 代码实例 代码解析 下载源码链接 代码实例 * { padding: 0; margin: 0; } #box1 { width: 500px; height: 20px; background: #999; position: relative; margin: 20px auto; } #box2 { width: 20px; height: 20px; background: green; position: absolute; } #box3 { width: 0;

  • HTML+JS实现猜拳游戏的示例代码

    HTML+JS实现猜拳游戏的示例代码

    目录 效果图 关于JS构建过程 添加事件监听器 函数 gameRules() 函数 whoWon() 效果图 游戏可以通过这个链接进入 关于JS构建过程 首先,我创建了一个对象,其中包含每种可能性的文本格式(石头.纸.剪刀),然后将图像源也添加到该对象中. 在我制作的 HTML 中: playerChoiceImg playerChoiceTxt computerChoiceImg computerChoiceTxt 能够修改其中的每个内容. 然后创建了一个points变量,它将存储每个玩家(玩

随机推荐