Archive for the ‘js笔记’ Category.

« Previous Entries

JS笔记：构造函数，类，类属性，类方法

23rd 9月 2008, 02:48 下午
  1. <script type="text/javascript">
  2.         function Circle(radius){
  3.             this.r = radius;
  4.         }
  5.         Circle.PI = 3.1415926;
  6.         Circle.prototype.area = function(){
  7.             return Circle.PI * this.r * this.r;
  8.         }
  9.         Circle.max = function(a,b){
  10.             if(a.r > b.r) return a;
  11.             else return b;
  12.         }
  13.        
  14.         var c = new Circle(1.0);
  15.         c.r = 2.2;
  16.         var d = new Circle(1.2);
  17.         alert(Circle.max(c,d).r);
  18.     </script>
分类： js笔记  |  1 条评论

几个常用的方法

18th 9月 2008, 06:29 下午
  1. //通过指定class和指定标签的对象
  2. function getClass(tag,cssName){
  3.     if(!document.getElementsByTagName(tag)) return;
  4.     var tags = document.getElementsByTagName(tag);
  5.     var cssName;
  6.     var arr = [];
  7.     for(var i = 0;i < tags.length;i++){
  8.         if(tags[i].className == cssName){
  9.             arr.push(tags[i]);
  10.             return arr;
  11.         }
  12.     }
  13. }
  14. //获得指定id的对象
  15. function getId(idName){
  16.     return document.getElementById(idName);
  17. }
  18. //为指定对象添加指定的class
  19. function addCss(element,cssName){ 
  20.     var element,cssName;
  21.     if (!element.className || element.className == cssName){ 
  22.         element.className = cssName;
  23.     } 
  24.     else{ 
  25.         element.className = element.className + " " + cssName;
  26.     } 
  27. }
  28. //移除指定对象的指定class
  29. function removeCss(element,cssName){ 
  30.     var element,cssName;
  31.     var oldCss = element.className;
  32.     var cssList = oldCss.split(" ");
  33.     for(var i = 0;i < cssList.length;i++){ 
  34.         if (cssList[i] == cssName) { 
  35.             cssList[i] = "";
  36.             break;
  37.         } 
  38.     } 
  39.     element.className = cssList.join(" ");
  40. }
分类： js笔记  |  2 条评论

js笔记:模拟下拉列表

4th 8月 2008, 05:42 下午

html部分

  1. <div id="select">
  2.     <div id="selectHead">First</div>
  3.     <ul id="csList">
  4.         <li class="cs">First</li>
  5.         <li>Seconde</li>
  6.         <li>Third</li>
  7.     </ul>
  8. </div>

css部分

  1. *{padding:0;margin:0;}
  2. body{font:12px Arial;}
  3. #select{width:100px;}
  4. #select #selectHead{border:1px solid #ccc;line-height:20px;cursor:pointer;}
  5. #select ul{border:1px solid #ccc;border-top:0;display:none;}
  6. #select ul li{line-height:20px;cursor:default;}
  7. #select .onhover{background:#0069ca;color:#fff;}

javascript部分

  1. <script type="text/javascript">
  2.     function select(){
  3.         var selectHead = document.getElementById("selectHead");
  4.         var csList = document.getElementById("csList");
  5.         selectHead.onclick = function(){
  6.             if (csList.style.display != "block") {
  7.                 csList.style.display = "block";
  8.             }
  9.             else {
  10.                 csList.style.display = "none";
  11.             }
  12.         }
  13.         var optionList = csList.getElementsByTagName("li");
  14.         for(var i = 0;i < optionList.length;i++){
  15.             optionList[i].onclick = function(event){
  16.                 if (!event) {
  17.                     event = window.event;
  18.                 }
  19.                 el = event.target || event.srcElement;
  20.                 var csContent = el.innerHTML;
  21.                 selectHead.innerHTML = csContent;
  22.                 csList.style.display = "none";
  23.             }
  24.             optionList[i].onmouseover = function(event){
  25.                 if (!event) {
  26.                     event = window.event;
  27.                 }
  28.                 el = event.target || event.srcElement;
  29.                 addCss(el,"onhover");
  30.             }
  31.             optionList[i].onmouseout = function(event){
  32.                 if (!event) {
  33.                     event = window.event;
  34.                 }
  35.                 el = event.target || event.srcElement;
  36.                 removeCss(el,"onhover");
  37.             }
  38.         }
  39.     }
  40.     function addCss(element,cssName){
  41.         var element,cssName;
  42.         if (!element.className || element.className == cssName){
  43.             element.className = cssName;
  44.         }
  45.         else{
  46.             element.className = element.className + " " + cssName;
  47.         }
  48.     }
  49.     function removeCss(element,cssName){
  50.         var element,cssName;
  51.         var oldCss = element.className;
  52.         var cssList = oldCss.split(" ");
  53.         for(var i = 0;i < cssList.length;i++){
  54.             if (cssList[i] == cssName) {
  55.                 cssList[i] = "";
  56.                 break;
  57.             }
  58.         }
  59.         element.className = cssList.join(" ");
  60.     }
  61.     window.onload = select;
  62. </script>

查看效果

分类： js笔记  |  1 条评论
« Previous Entries