(1)图片轮转
<script type="text/javascript" > var num=1; setInterval(function(){ var dom=document.getElementById('myid'); // var mysrc=dom.src; //alert(mysrc); if(num<5){ num++; }else{ num=1; } dom.src='images/'+num+'.jpg'; ,1000); </script>
<body> <img src="images/1.jpg" width="500px" height="500px" id="myid"/> </body>
这个要用到setInterval(调用的函数名称,周期性调用函数之间间隔的毫秒数);
获取路径:document.getElementById(绑定的Id);
想实现轮转,我们想到的就是改变图片的路径,这就用到了判断,因为我们就几张图片,就举个简单的例子!
想要轮转更多只需要把num数变一下即可。
(2)倒计时10s
<script type="text/javascript"> windom.onload=function(){ //获取开始按钮对象 var mystrat=document.getElementById('stratid'); //获取停止按钮对象 var mystop=document.getElementById('stopid'); //当点击开始时发生 var date=0; mystrat.onclick=function(){ date=setInterval(stratnum,1000); }; //当点击停止时发生 mystop.onclick=function(){ clearInterval(date); }; //时间倒数方法 function stratnum(){ var dom=document.getElementById('myspan'); //alert(dom); var num=dom.innerText; if(num>0){ num--; } dom.innerText=num; }; } </script>
<body> <input type="buttom" id="stratid" value="開始"> <input type="button" id="stopid" value="停止"> <span id="myspan">10</span> </body>
想要達到倒計時的效果,我們要先考慮怎麼獲取當前的數,用到的方法還是document.getElementById(獲取對象的Id);
這樣我們就可以進行判斷了,只要滿足我們的條件即可。
在這裡還有一個知識點,就是先獲取的是點擊的對象,然後再根據它們響應的事件作出具體的操作。
(3)referrer的使用
2.html
<body> <a href="2.html"> 馬上抽獎</a> </body>
1.html
<script type="text/javascript"> windom.onload=funcction(){ var mystr=document.referrer; if(mystr){ var dom=document.getElementById('mydiv'); dom.style.display='none'; }else{ setInterval(function(){ var dom = document.getElementById("myspan"); var num = dom.innerText; if (num > 1) { num--; dom.innerText = num; } else { location.href = "2.html"; } },1000); } }; </script>
<body> <div id="mydiv"> <span style="color:red;" id="myspan">5</span>秒后跳转到登陆页面 </div> </body>
先要获取从上一个网页过来的路径:document.referrer;如果得到的路径为空,说明不是从登陆页面过来的,
就要进行判断该显示什么,不该显示什么,
获取秒数:document.ElementById('myspan');,
这个时候就需要我们进行判断了,秒数不可能为负,当为零时跳转到登录页面。
反之,就是正常从登录页面过来的。