1.廣告條顯示、
<style type="text/css">
*{margin:0px;padding:0px;}
img{display:none;width: 250px;height: 200px;}
</style>
<script type="text/javascript">
//當前值
var current = 1;
//最大值
var max = 4;
function ad(){
//隱藏
document.getElementById("o" + current).style.display = "none";
//判斷是否越界
if( current >= max ){
//還原
current = 0;
}
//下一個值
var next = current + 1;
//顯示
document.getElementById("o" + next).style.display = "block";
//當前值遞增
current++;
//每個一秒鐘執行一次
window.setTimeout("ad()",1000);
}
2.改變背景顏色（更換皮膚）
<script type="text/javascript">
//修改背景顏色
function changeBG(color){
//修改對象的顏色
document.getElementById("body").style.backgroundColor= color;
}
</script>
<body>
<div style="width:100%;height:30px;padding-left:15px;">
<div class="c" style="background:yellow;" οnmοuseοver="changeBG('yellow')"></div>
<div class="c" style="background:pink;" οnmοuseοver="changeBG('pink')"></div>
<div class="c" style="background:red;" οnmοuseοver="changeBG('red')"></div>
<div class="c" style="background:blue;" οnmοuseοver="changeBG('blue')"></div>
<div class="c" style="background:green;" οnmοuseοver="changeBG('green')"></div>
<div class="c" style="background:black;" οnmοuseοver="changeBG('black')"></div>
</div>
<div id="body" style="width:100%;height:90%;padding-top:30px;background:red;"></div>
</body>
3.定時跳轉
<script type="text/javascript">
//起始時間
var i = 5;
/** 定時跳轉 **/
function time(){
//寫出
document.getElementById("t").innerHTML = i--;
//判斷
if( i == 0 ){
//跳轉
window.location.href = "http://www.baidu.com";
}else{
//每個一秒鐘執行一次
window.setTimeout("time()",1000);
}
}
</script>
<body οnlοad="time()">
<div style="text-align:center;margin-top:200px;color:red;font-size:18px;font-weight:bolder;">
註冊成功 , 當前頁面會在 <span id="t"></span> 秒之後跳轉 . <a href="##">如果沒有跳轉 , 則點擊這裏</a>
</div>
</body>
4.全選/全否 ，
//默認爲 false 沒有選中
var j = 0;
//全選 / 全否
function is(){
//獲取所有的 複選對象
var h = document.getElementsByName("hobby");
for(i=0;i<h.length;i++){
if( j % 2 != 0){
//反選
h[i].checked = false;
}else{
h[i].checked = true;
}
}
j++;
}
5.全選/反選 ，
//全選/反選
function not(){
//獲取所有的 複選對象
var h = document.getElementsByName("hobby");
for(i=0;i<h.length;i++){
if( h[i].checked ){
//反選
h[i].checked = false;
}else{
h[i].checked = true;
}
}
}
6.播放音頻
<div>
<span><embed src="/JavaEE/image/mp3.mp3" loop="true" autoplay="true" hidden="false"></span>
</div>
7.隔行變色 事件綁定。
<script type="text/javascript">
onload = function(){
//獲取指定的 ul 對象
var ul = document.getElementById("ul");
//獲取 ul 裏面的 li 對象
var lis = ul.getElementsByTagName("li");
//通過條目數 得到 奇數 和偶數 行 對象
for(i=0;i<lis.length;i++){
if( i % 2 == 0 ){
//奇數
lis[i].style.backgroundColor = "#6A5ACD";
//鼠標移除
lis[i].onmouseout = function(){
this.style.backgroundColor = "#6A5ACD";
}
//this代表當前對象lis[i]
}else{
//偶數
lis[i].style.backgroundColor = "#6495ED";
//鼠標移除
lis[i].onmouseout = function(){
this.style.backgroundColor = "#6495ED";
}
}
//鼠標移入
lis[i].onmouseover = function(){
this.style.backgroundColor = "yellow";
}
}
}
</script>
8.彈出廣告
onload = function(){
//當前窗體大小<p>
</p>
var width = 670;
var height = 530;
//獲取窗體大小
var w = (window.screen.width - width )/2;
var h = (window.screen.height - height - 40 )/2;
//加載頁面就彈出廣告窗口
window.open("AD.html","廣告","width="+width+"px,height="+height+"px,left="+w+",top="+h+"px");
}
9.滑動廣告
//滾動廣告
onscroll = function(){
//獲取滾動高度
var t = document.body.scrollTop;
//賦給當前的層對象
document.getElementById("div").style.top = t;
}
//隱藏廣告
function hiddnAD(){
document.getElementById("div").style.visibility = "hidden";
}
<div id="div">
<ul>
<li id="li_1"> <a href="javascript:hiddnAD()" title="點擊關閉廣告">Close</a> </li>
<li>
<img src="/JavaEE/image/yellowDog.jpg">
</li>
</ul>
</div>
