网页换肤：
<div>
<button>red</button>
<button>blue</button>
<button>black</button>
<div>
<script>
var btn=document.getElementsByTagName("button");
for(var i=0;i<btn.length;i++){
btn[i].onclick=function(e){
document.body.style.background=e.target.innerHTML;
}
}
</script>
用循环改变元素背景：
<div id="s">
<button>red</button>
<button>blue</button>
<button>black</button>
<div>
<button id="kk">yellow</button>
<script>
var btn=document.getElementById("kk");
btn.onclick=function(e){
var len=document.getElementById("s").getElementsByTagName("button");
for(var i=0;i<len.length;i++){
len[i].style.background=e.target.innerHTML;
}
}
</script>
鼠标移入移出改变元素样式：
<div id="s">
<div>
<style>
#s{background: blueviolet;width: 200px;height: 100px;}
#s.d{background: red;width: 100px;height: 50px;}
}
</style>
<script>
var dd=document.getElementById("s");
dd.onmouseover=function(){
dd.classList.add("d");
}
dd.onmouseout=function(){
dd.className="";
}
</script>
鼠标移入移出交替显示提示框
<input id="ss"type="radio"/>
<div id="tips">don`t forget it </div>
<script>
window.onload=function(){
var ss=document.getElementById("ss");
var tips=document.getElementById("tips");
ss.onmouseover=function(){
tips.style.display="block";
}
ss.onmouseout=function(){
tips.style.display="none";
}
}
</script>
<style>
#tips{
background: yellow;width: 150px;height: 20px;text-align: center;display: none;
}
</style>
交替显示样式（三元运算符）
<input id="ss"type="radio"/>
<div id="tips">don`t forget it </div>
<script>
window.onload=function(){
var ss=document.getElementById("ss");
var tips=document.getElementById("tips");
ss.onclick=function(){
tips.style.display=(tips.style.display=="block")?"none":"block";
;
}
}
</script>
<style>
#tips{
background: yellow;width: 150px;height: 20px;text-align: center;display: none;
}
</style>
时钟（时分秒）
<script>
setInterval(b,1000);
function b(){
var date=new Date();
var a=[date.getHours(),date.getMinutes(),date.getSeconds()];
for(var i in a ){
document.getElementsByClassName("datee")[i].innerHTML=a[i];
}
}
</script>
<span class="datee">
</span>:
<span class="datee">
</span>:
<span class="datee">
</span>
纯css下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="nav">
<li >Index
<ul ><li>001</li>
<li>001</li>
<li>001</li>
</ul>
</li>
<li>About
<ul><li>001</li>
<li>001</li>
<li>001</li>
</ul>
</li>
<li>News
<ul><li>001</li>
<li>001</li>
<li>001</li>
</ul>
</li>
</ul>
<style>
#nav,#nav ul{list-style: none;}
#nav li{margin-right:1em;font-size:110%;text-align:center;background:darkkhaki;float: left;width: 10em;color: darkcyan;cursor: pointer;border: 1px solid rosybrown;}
#nav ul{display: none;padding: 0 ;}
#nav ul li{padding:0;background:darkgray;float: none;padding: 10px;border: 0 none transparent;padding: 0;}
#nav li:hover ul{display: block;}
</style>
</body>
</html>
