进击的小广告
那么好吧，Js已经学了一些东西了，也尝试着写了一些效果。感觉还不错（其实很伤脑筋。。。）；
那么，继某大神之后我也尝试着写了一下动态广告碰撞反弹效果，几经周折。。经过N个小时的奋战终于出炉的新作品被我一个不小心删掉了（手贱党）。
重新开工的时候从网上查询内置方法偶然打开一页面看到了据说是面试题的一个小作业，功能很相近。那么我就来试试吧~~~~
题目如下：
在页面中的一篇区域内有一正方形图片广告在区域内碰撞反弹，区域内置两个按钮，1个文本框；
按钮1点击后的1分钟内，广告开始漂浮，1分钟后自动停止。
按钮2应用于暂停/开始（包括倒计时）。
文本框中以秒为单位倒计时显示剩余时间。
作业时间：2小时。。。ready~~go！！！！
经过一段时间的奋战，终于完成了效果。（问我用时者，请自重！）
废话不多说，代码如下。。。（求大神点评啊~~）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 1024px;
height: 630px;
border:1px solid blue;
position: relative;
}
.inner{
width: 100px;
height: 100px;
background: red;
position: absolute;
z-index: 999;
}
.btn{
display: inline-block;
width: 80px;
height: 30px;
position: absolute;
top: 600px;
left: 0px;
z-index: 1000;
}
.pas{
display: inline-block;
width: 80px;
height: 30px;
position: absolute;
top: 600px;
left: 100px;
z-index: 1000;
}
.time{
display: inline-block;
width: 100px;
height: 30px;
border:2px dotted red;
position: absolute;
top: 1px;
left:920px;
z-index: 1000;
line-height: 30px;
text-align: center;
vertical-align: center;
color: gray;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner" id="inner">我是坑爹的小广告</div>
<button id="btn" class="btn">Push Me</button><button id="pas" class="pas">Pause</button>
<span class="time" id="time">倒计时</span>
</div>
</body>
<script>
var obox = document.getElementById("box");
var oinner = document.getElementById("inner");
var obtn = document.getElementById("btn");
var opas = document.getElementById("pas");
var otime = document.getElementById("time");
var x = 0,y = 0,flag = 0,flagx = 0,flagy = 0,time = 59;
var a,b;
obtn.onclick = play;
opas.onclick = pause;
function play(){
pause();
setTimeout("clearInterval(a)",60000);//倒计时后调用函数(清除循环调用函数)
setTimeout("clearInterval(b)",61000);
otime.innerHTML = time;
time = 59;
}
function pause(){
if(flag == 0){
a = setInterval("move()",1);//循环调用函数
b = setInterval("min()",1000)
flag = 1;
opas.innerHTML = "Pause"
}else{
clearInterval(a);
clearInterval(b);
flag = 0;
opas.innerHTML = "Start"
}
}
function min(){
time--;
if(time>=0){
otime.innerHTML = time;
}
}
function move () {
if (x>=0&&x<=924) {
if (flagx == 0) {
x++;
oinner.style.left = x+"px";
}
if (flagx == 1) {
x--;
oinner.style.left = x+"px";
}
if(x == 1){
flagx = 0;
}
if(x == 923){
flagx = 1;
}
}
if (y>=0&&y<=530) {
if (flagy == 0) {
y++;
oinner.style.top = y+"px";
}
if (flagy == 1) {
y--;
oinner.style.top = y+"px";
}
if(y == 1){
flagy = 0;
}
if(y == 529){
flagy = 1;
}
}
}
</script>
</html>
代码如上，顺便记下几个重要的方法吧（注释中有）
clearInterval("function",time)//清楚循环调用函数
setTimeOut("function",time)//time毫秒后调用该函数
setInterval("function",time)//间隔time毫秒后调用该函数
