用js制作的几个效果
一，表格光柱效果（奇偶行不同颜色，鼠标移上变色）
<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>
六，登录页面效果
<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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
