JS实现静止元素自动移动示例_Javascript教程-查字典教程网
JS实现静止元素自动移动示例
JS实现静止元素自动移动示例
发布时间:2016-12-30 来源:查字典编辑
摘要:一个元素是静止的,使它在屏幕上实现自动移动。这是一个比较简单问题,在学习中遇到了,把它写了下来。复制代码代码如下:#sp1{border:r...

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

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

复制代码 代码如下:

<!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教程学习
    编程开发子分类