首页 > 代码库 > 今日所学1
今日所学1
今日也主要学习js，但更为深入。
首先是全局变量及局部变量。全局变量可以在整个程序内进行引用，而局部变量只能在其定义的函数内使用。在平时编程过程中，需要特别注意何时该用何种变量。巧用变量会得到出乎意料的结果。同事在js中连接字符串、数字及变量采用‘+‘。最后学习了定时器及延时器的用法，定时器是每隔一段时间进行调用某个函数，一直循环，直到清除定时器，而延时器是隔一段时间才调用某个函数。经过今天的学习，以及老师的指点，自行编程，完成了跑马灯效果制作。其代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" value="http://www.mamicode.com/跑马灯" id="but1" onClick="change1()"/>
<input type="button" value="http://www.mamicode.com/停止" id="but2" / onClick="stop1()">
<div style="height:100px; width:100px; background:rgba(0,255,0,1); margin-left:0px; margin-top:0px;" id="div1"></div>
</body>
</html>
<script>
var timer;
var fx=0;
var obtd=document.getElementById(‘div1‘);
function change1(){
timer=setInterval(change,100);
function change(){
if(parseInt(obtd.style.marginLeft)==500&&parseInt(obtd.style.marginTop)!=500){fx=1;}
else if(parseInt(obtd.style.marginTop)==500&&parseInt(obtd.style.marginLeft)==500){fx=2;}
else if(parseInt(obtd.style.marginLeft)==0&&parseInt(obtd.style.marginTop)==500){fx=3;}
else if(parseInt(obtd.style.marginTop)==0&&parseInt(obtd.style.marginLeft)==0){fx=0;}
if(fx==0){moveright();}
else if(fx==1){movebottom();}
else if(fx==2){moveleft();}
else if(fx==3){movetop();}
}
}
function stop1(){
clear=clearInterval(timer);
}
function moveright(){
var me3="#"+Math.floor(Math.random()*256).toString(16)+Math.floor(Math.random()*256).toString(16)+Math.floor(Math.random()*256).toString(16);
obtd.style.backgroundColor=me3;
obtd.style.marginLeft=(parseInt(obtd.style.marginLeft)+10)+‘px‘;
//console.log(obtd.style.marginLeft);
}
function moveleft(){
var me3="#"+Math.floor(Math.random()*256).toString(16)+Math.floor(Math.random()*256).toString(16)+Math.floor(Math.random()*256).toString(16);
obtd.style.backgroundColor=me3;
obtd.style.marginLeft=(parseInt(obtd.style.marginLeft)-10)+‘px‘;
//console.log(obtd.style.marginLeft);
}
function movebottom(){
var me3="#"+Math.floor(Math.random()*256).toString(16)+Math.floor(Math.random()*256).toString(16)+Math.floor(Math.random()*256).toString(16);
obtd.style.backgroundColor=me3;
obtd.style.marginTop=(parseInt(obtd.style.marginTop)+10)+‘px‘;
//console.log(obtd.style.marginLeft);
}
function movetop(){
var me3="#"+Math.floor(Math.random()*256).toString(16)+Math.floor(Math.random()*256).toString(16)+Math.floor(Math.random()*256).toString(16);
obtd.style.backgroundColor=me3;
obtd.style.marginTop=(parseInt(obtd.style.marginTop)-10)+‘px‘;
//console.log(obtd.style.marginLeft);
}
</script>
今日所学1