js小例子1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content=" www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 仿QQ好友选择效果 站长特效网欢迎您。</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
body,td,th{font-size:12px;}
#rightbar,#zzjs_net{border:1px solid #ccc;padding:10px;width:220px;height:300px;overflow:auto;}
#rightbar{float:right;}
#zzjs_net{float:left;}
#www_zzjs_net{width:800px;margin:0 auto;padding:15px;}
ul{padding-top:5px;}
ul li{line-height:1.8;cursor:pointer;width:100px;height:20px;background:#eee;margin:3px 0;list-style:none;}
#num{color:#f00;}
-->
</style>
</head>
<body>
<a href=" http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址: www.zzjs.net, [email protected],用.net打造靓站-->
<div id="www_zzjs_net">
  <div id="zzjs_net">
    <div id="_zzjs_net">你最多可以选择5个</div>
    <ul id="www_zzjs_ne">
      <li>选项一</li>
      <li>选项二</li>
      <li>选项三</li>
      <li>选项四</li>
      <li>选项五</li>
      <li>选项六</li>
      <li>选项七</li>
      <li>选项八</li>
      <li>选项九</li>
      <li>选项十</li>
      <li>选项十一</li>
      <li>选项十二</li>
      <li>选项十三</li>
      <li>选项十四</li>
      <li>选项十五</li>
    </ul>
  </div>
  <div id="rightbar">
    您已经选择了<strong id="num">0</strong>个!
    <ul id="rightul"></ul>
  </div>
</div>
<script type="text/javascript">
var maxNum = 5, Len=0, Nums=document.getElementById("num");
var li = document.getElementById('www_zzjs_ne').getElementsByTagName('li');
for(var i=li.length; i--; ){
  li[i].id = i;
  li[i].onclick = add;
}//欢迎来到站长特效网,我们的网址是 www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function add(){
  if(++Len > maxNum){
    document.getElementById("_zzjs_net").innerHTML = "<strong style='color:#f00'>你已经选择够了!</strong>"
    --Len;
    return false;
  }
  var newli = document.createElement("li");
  newli.onclick = remove;
  newli.setAttribute("title",this.id);
  newli.appendChild(document.createTextNode(this.innerHTML));
  document.getElementById("rightul").appendChild(newli);
  this.style.display = "none";
  Nums.innerHTML = Len
}
function remove(){
  document.getElementById("_zzjs_net").innerHTML = "你最多可以选择五个!";
  var title = this.getAttribute("title");
  document.getElementById(title).style.display = "block";
  Nums.innerHTML = --Len;
  this.parentNode.removeChild(this);
}//欢迎来到站长特效网,我们的网址是 www.zzjs.net, 很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script>
</body>
</html>

你可能感兴趣的:(js小例子1)