一，表格光柱效果（奇偶行不同颜色，鼠标移上变色）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tb tr
{
background-color:white;
}
</style>
<script language="javascript">
var bg;
function doover(tr)
{
bg=tr.style.backgroundColor; //记住这一行本来的背景色。
tr.style.backgroundColor="yellow"; //鼠标移上此行的颜色变成黄色
}
function doout(tr)
{
tr.style.backgroundColor=bg; //鼠标移开此行的颜色变为原来的颜色
}
</script>
</head>
<body>
<table id="tb" width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="black">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
//为每个tr元素加上两个事件。
var trs = document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++)
{
//偶数行设成灰色背景
if(i%2==0)
{
trs[i].style.backgroundColor="#e0e0e0";
}
//加事件
trs[i].setAttribute("onmouseover","doover(this)");
trs[i].setAttribute("onmouseout","doout(this)");
}
</script>
二，简单的添加购物车效果（点击商店里的商品即可添加到你所买的商品里面）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function buy(li)
{
var s = document.getElementById("ss");
s.appendChild(li);
}
</script>
</head>
<body>
商店里的商品：
<ul id="dd">
<li onclick="buy(this)">苹果</li>
<li onclick="buy(this)">桔子</li>
<li onclick="buy(this)">香蕉</li>
<li onclick="buy(this)">菠萝</li>
</ul>
你所买的商品：
<ul id="ss">
</ul>
</body>
</html>
三，下拉菜单效果
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu ul
{
display:none;
}
#menu li
{
list-style-type:none;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<img src="images/jia.png" height="14" class="pre">
<span>关于我们</span>
<ul>
<li>公司介绍</li>
<li>公司新闻</li>
<li>公司地址</li>
</ul>
</li>
<li>
<img src="images/jia.png" height="14" class="pre">
<span>产品服务</span>
<ul>
<li>数码产品</li>
<li>家电产品</li>
<li>售后服务</li>
</ul>
</li>
<li>
<img src="images/jia.png" height="14" class="pre">
<span>成功案例</span>
<ul>
<li>家电系列</li>
<li>数码系列</li>
<li>家居系列</li>
</ul>
</li>
<li>
<img src="images/jia.png" height="14" class="pre">
<span>会员管理</span>
<ul>
<li>加入会员</li>
<li>注册会员</li>
</ul>
</li>
</ul>
</body>
</html>
<script language="javascript">
var ul = document.getElementById("menu");
for(var i=0;i<ul.childNodes.length;i++) //遍历#menu下的所有子级li
{
if(ul.childNodes[i].tagName=="LI") //如果找到子级中的li（子级中包含li、空格和回车）
{
ul.childNodes[i].setAttribute("onclick","showSubMenu(this)"); //就给li加上单击的事件
}
}
function showSubMenu(li)
{
var uls = li.getElementsByTagName("ul"); //在li下找标签名是ul的元素
if(uls!=null)
{
if(uls[0].style.display!="block") //如果ul的属性不是block
{
li.getElementsByTagName("img")[0].src="images/jian.png";
uls[0].style.display="block"; // 那就给他设成block并把li前面的图片换成“减号”
}
else
{
li.getElementsByTagName("img")[0].src="images/jia.png";
uls[0].style.display="none"
}
}
}
</script>
四，微博记字数的效果（onkeyup）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#zishu
{
color:red;
font-weight:bold;
}
</style>
<script language="javascript">
function showCount(tt)
{
var len = tt.value.length; //获取输入字符的长度
var c = 140-len;
document.getElementById("zishu").innerHTML = c; //用140减去输入字符的长度就是剩余可输入字数
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>请输入内容：<br />
<label for="txt"></label>
<textarea name="txt" onkeyup="showCount(this)" id="txt" cols="80" rows="10"></textarea>
<br />
最多输入140字，你还可以再输入<span id="zishu">140</span>字<br />
<input type="button" name="btn" id="btn" value="发送" />
<br />
</p>
</form>
</body>
</html>
五，同意才可点击下一步的效果
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function doYesClick()
{
//找按钮
var b = document.getElementById("button");
//设为可用
b.removeAttribute("disabled");
}
function doNoClick()
{
//找按钮
var b = document.getElementById("button");
//设为不可用
b.setAttribute("disabled","disabled");
}
</script>
</head>
<body>
<form action="" method="get">
<p>
<input id="rbAgree" name="rbAgree" type="radio" value="true" onclick="doYesClick()" />
同意
<input name="rbAgree" type="radio" id="rbNotAgree" value="false" onclick="doNoClick()" checked="checked" />不同意
</p>
<p>
<input type="submit" name="button" disabled="disabled" id="button" value="下一步" />
</p>
</form>
</body>
</html>
六，登录页面效果
1，开始框内显示必填，输入字符后消失
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#ss{ color:red;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>账号：
<label for="d1"></label>
<input type="text" onfocus="dofocus(this)" onblur="doblur(this)" name="d1" id="d1" value="(必填)" style="color:#CCC" />
</p>
<p>密码：
<label for="mm"></label>
<input type="text" name="mm" id="mm" onfocus="dofocus(this)" onblur="doblur(this)" value="(必填)" style="color:#CCC" />
</p>
<p>
<input type="submit" name="an" id="an" value="登录" />
</p>
</form>
</body>
</html>
<script language="javascript">
function dofocus(tst)
{
if(tst.value=="(必填)")
{
tst.value=""; //当点进去之后“必填”俩字去掉，然后字体颜色变为黑色
tst.style.color="black";
}
}
function doblur(tst)
{
if(tst.value.length==0)
{
tst.value="(必填)";
tst.style.color="#CCC"; //当失去焦点并且文本框中值的长度为0时，恢复“必填”且其颜色为灰色
}
}
</script>
2,账号密码不能为空
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.errorshow
{
color:red;
}
</style>
<script language="javascript">
function yanZheng()
{
var allOK = true;
//把值取出来。
var uid = document.getElementById("txtUID").value;
var pwd = document.getElementById("txtPWD").value;
//判断 设置错误 信息
if(uid.length==0)
{
document.getElementById("spanUID").innerHTML="用户名不能为空";
allOK = false;
}
if(pwd.length==0)
{
document.getElementById("spanPWD").innerHTML="密码不能为空";
allOK = false;
}
if(allOK == true)
{
document.getElementById("form1").submit();
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>账号：
<label for="txtUID"></label>
<input type="text" name="txtUID" id="txtUID" />
<span id="spanUID" class="errorshow">*</span>
</p>
<p>密码：
<label for="txtPWD"></label>
<input type="password" name="txtPWD" id="txtPWD" />
<span id="spanPWD" class="errorshow">*</span>
</p>
<p>
<input type="button" name="btn" id="btn" onclick="yanZheng()" value="登录" />
</p>
</form>
</body>
</html>
七，qq面板的效果
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#qqPane
{
250px;
border:1px solid navy;
}
.divTitle
{
background-color:navy;
color:white;
text-align:center;
font-weight:bold;
padding-top:5px;
padding-bottom:5px;
margin-top:1px;
}
.divContent
{
height:300px;
background-color:#FF9;
display:none;
}
</style>
<script language="javascript">
function doShow(sid)
{
//找要显示的div
var dd = document.getElementById(sid);
//把所有divContent都给隐藏
var divs = document.getElementsByTagName("div"); //获取所有的div
for(var i=0;i<divs.length;i++)//遍历所有的div
{
if(divs[i].className=="divContent") //筛选出divContent
{
divs[i].style.display="none"; //把divContent统统隐藏
}
}
//切换显示状态
if(dd.style.display != "block")
{
dd.style.display="block";
}
else
{
dd.style.display = "none";
}
}
</script>
</head>
<body>
<div id="qqPane">
<div class="divTitle" onclick="doShow('haoyou')">我的好友</div>
<div id="haoyou" class="divContent"></div>
<div class="divTitle" onclick="doShow('heimingdan')">黑名单</div>
<div id="heimingdan" class="divContent"></div>
<div class="divTitle" onclick="doShow('moshengren')">陌生人</div>
<div id="moshengren" class="divContent"></div>
</div>
</body>
</html>