JavaScript学习整理（转载）

其他 2018-08-04 19:50:05 阅读次数: 0

JavaScript的学习整理（一）

目录：


1.换皮肤功能
2.显示/隐藏（点击切换）
3.显示/隐藏(onmouseover/onmouseout)
4.选项卡
5.全选/不选/反选(checkbox)
6.简易日历

1、换肤功能——实质是改变链接的css文件

     step 1.先通过id获取需要修改的部分（link）；       step 2.通过 href 改变 需要链接的css文件；

     下面我写了一个小的代码，只是用于改变页面背景颜色来供大家参考学习。

  1.  
    <input type="button" value="skin1" onclick="skin_1()"/>
  2.  
    <input type="button" value="skin2" onclick="skin_2()"/>
  3.  
    <script>
  4.  
    function skin_1()
  5.  
    {
  6.  
    var oL=document.getElementById('11');
  7.  
    oL.href= "1.css";
  8.  
    }
  9.  
    function skin_2()
  10.  
    {
  11.  
    var oL=document.getElementById('11');
  12.  
    oL.href= "2.css";
  13.  
    }
  14.  
    </script>

其中，1.css文件：

  1.  
    body{
  2.  
    background:#2A5698;
  3.  
    }


2.css 文件：

  1.  
    body{
  2.  
    background:pink;
  3.  
    }

 

2、显示隐藏效果（点击切换）    

 其中，none:隐藏    block：显示

  1.  
    <input type="button" value="显示/隐藏" onclick="showHide()"/>
  2.  
    <div id="div1">点击显示，点击隐藏</div>
  3.  
     
  4.  
    <style>
  5.  
    #div1{width:200px; height:100px; background:lightblue; display:none;}
  6.  
    </style>
  7.  
     
  8.  
    <script>
  9.  
     
  10.  
    function showHide()
  11.  
    {
  12.  
    var oDiv=document.getElementById('div1');
  13.  
    if(oDiv.style.display=='block')
  14.  
    {
  15.  
    oDiv.style.display= 'none';
  16.  
    }
  17.  
    else
  18.  
    {
  19.  
    oDiv.style.display= 'block';
  20.  
    }
  21.  
    }
  22.  
    </script>

3、显示/隐藏（当鼠标悬浮在区域时显示文字，离开则隐藏效果）

  1.  
    <input type="text" value="显示/隐藏" onmouseover="document.getElementById('div2').style.dispaly='block';" onmouseout="document.getElementById('div2').style.display='none';">
  2.  
    <div id="div2">这里是需要显示的内容：</div>
  3.  
     
  4.  
    <style>
  5.  
    #div2{width:200px; height:100px; background:green; }
  6.  
    </style>

 

4、选项卡

选项卡：主要是改变 当前显示的div，通过改变className。   用到的知识有：①循环；②初始化；③this指针；

  1.  
    <!DOCTYPE HTML>
  2.  
    <html>
  3.  
    <head>
  4.  
        <meta charset="utf-8">
  5.  
        <title>JAVAscript</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <div id="div3">
  9.  
    <input class="active" type="button" value="教育"/>
  10.  
    <input type="button" value="培训"/>
  11.  
    <input type="button" value="招生"/>
  12.  
    <input type="button" value="出国"/>
  13.  
    <br/>
  14.  
    <div style="display:block;">11111</div>
  15.  
    <div>22222</div>
  16.  
    <div>33333</div>
  17.  
    <div>44444</div>
  18.  
    </div>
  19.  
     
  20.  
    <style>
  21.  
    #div3 .active{background:yellow;}
  22.  
    #div3 div{width:300px; height:200px;border:1px solid green;background:lightpink;display:none;}
  23.  
    </style>
  24.  
     
  25.  
    <script>
  26.  
    /*
  27.  
    *4、选项卡：主要是改变 当前显示的div，通过改变className。
  28.  
    */
  29.  
    window.onload=function()
  30.  
    {
  31.  
    var oDiv=document.getElementById('div3');
  32.  
    var aBtn=oDiv.getElementsByTagName('input');
  33.  
    var aDiv=oDiv.getElementsByTagName('div');
  34.  
     
  35.  
    for(var i=0;i<aBtn.length;i++)
  36.  
    {
  37.  
    aBtn[i].index=i;
  38.  
    aBtn[i].onclick= function()
  39.  
    {
  40.  
    for(var i=0;i<aBtn.length;++i)
  41.  
    {
  42.  
    //初始化
  43.  
    aBtn[i].className= '';
  44.  
    aDiv[i].style.display= 'none';
  45.  
    }
  46.  
    //alert(this.value);
  47.  
    this.className='active';
  48.  
    aDiv[ this.index].style.display='block';
  49.  
    };
  50.  
    }
  51.  
     
  52.  
    };
  53.  
    </script>
  54.  
    </body>
  55.  
    </html>

 

5、全选/不选/反选

选择--checked   其中：checked=true 勾选，  checked=false  不选,     **注意没有引号。

  1.  
    <input type="button" id="btn11" value="全选"/> 
  2.  
    <input type="button" id="btn22" value="不选"/> 
  3.  
    <input type="button" id="btn33" value="反选"/> <br/>
  4.  
    <div id="div4">
  5.  
    <input type="checkbox">1<br/>
  6.  
    <input type="checkbox">2<br/>
  7.  
    <input type="checkbox">3<br/>
  8.  
    <input type="checkbox">4<br/>
  9.  
    <input type="checkbox">5<br/>
  10.  
    <input type="checkbox">6<br/>
  11.  
    </div>
  12.  
     
  13.  
    <script>
  14.  
    /*
  15.  
    *7、选择--checked
  16.  
    *checked=true 勾选， checked=false 不选,
  17.  
    *注意没有引号。
  18.  
    */
  19.  
    window.onload=function()
  20.  
    {
  21.  
    var But1=document.getElementById('btn11');
  22.  
    var But2=document.getElementById('btn22');
  23.  
    var But3=document.getElementById('btn33');
  24.  
    var oDiv=document.getElementById('div4');
  25.  
    var oCh=oDiv.getElementsByTagName('input');
  26.  
     
  27.  
    //全选
  28.  
    But1.onclick= function()
  29.  
    {
  30.  
    for(var i=0;i<oCh.length;i++)
  31.  
    {
  32.  
    oCh[i].checked= true;
  33.  
    }
  34.  
    };
  35.  
    //不选
  36.  
    But2.onclick= function()
  37.  
    {
  38.  
    for(var i=0;i<oCh.length;i++)
  39.  
    {
  40.  
    oCh[i].checked= false;
  41.  
    }
  42.  
    };
  43.  
    //反选
  44.  
    But3.onclick= function()
  45.  
    {
  46.  
    for(var i=0;i<oCh.length;i++)
  47.  
    {
  48.  
    if(oCh[i].checked==false)
  49.  
    {oCh[i].checked= true;}
  50.  
    else
  51.  
    {oCh[i].checked= false;}
  52.  
    }
  53.  
    };
  54.  
    };
  55.  
    </script>



6、简易日历

简易日历：（综合应用）   涉及到的知识点有：①循环；②数组；③选项卡切换；④this.index；⑤innerHTML

  1.  
    <!DOCTYPE HTML>
  2.  
    <html>
  3.  
    <head>
  4.  
        <meta charset="utf-8">
  5.  
        <title>JAVAscript</title>
  6.  
     
  7.  
    <style>
  8.  
    #div5{height:650px;width:370px;border:1px solid black;font-family:Arial;
  9.  
    font-size:15px;background:#E6E6E4;}
  10.  
    #div5 li{list-style-type:none;border:1px solid gray;width:90px;height:90px;float:left;margin-right:5px;
  11.  
    margin-top:5px;background:black;color:white;}
  12.  
    .text{margin-left:40px;margin-top:0px;width:285px;height:200px;border:1px solid #F7F7F5;float:left;background:#EEEEEE;}
  13.  
    #div5 .active{background:white;color:#BC647B;border:1px solid black;}
  14.  
    </style>
  15.  
    <pre name="code" class="html"></head>
  16.  
    <body>
  17.  
    <div id="div5">
  18.  
    <center>
  19.  
    <ul>
  20.  
    <li class="active"><h2>1</h2><p>JAN</p></li>
  21.  
    <li><h2>2</h2><p>FEB</p></li>
  22.  
    <li><h2>3</h2><p>MAR</p></li>
  23.  
    <li><h2>4</h2><p>APR</p></li>
  24.  
    <li><h2>5</h2><p>MAY</p></li>
  25.  
    <li><h2>6</h2><p>JUN</p></li>
  26.  
    <li><h2>7</h2><p>JUL</p></li>
  27.  
    <li><h2>8</h2><p>AUG</p></li>
  28.  
    <li><h2>9</h2><p>SEP</p></li>
  29.  
    <li><h2>10</h2><p>OTC</p></li>
  30.  
    <li><h2>11</h2><p>NOV</p></li>
  31.  
    <li><h2>12</h2><p>DEC</p></li>
  32.  
    </ul>
  33.  
    <br/><br/>
  34.  
    <div class="text">
  35.  
    <h2>1月活动</h2>
  36.  
    <p>一月活动... </p>
  37.  
    </div>
  38.  
    </center>
  39.  
    </div>
  40.  
     
  41.  
    <script>
  42.  
    /**
  43.  
    *6、简易日历：
  44.  
    涉及：①循环；②数组；③选项卡切换；④this.index；⑤innerHTML
  45.  
    */
  46.  
    window.onload=function()
  47.  
    {
  48.  
    var arr=['一月活动...','二月活动...','三月活动...','四月活动...','五月活动...','六月活动...','七月活动...','八月活动...','九月活动...','十月活动...','十一月活动...','十二月活动...'];
  49.  
    var oDiv=document.getElementById('div5');
  50.  
    var aLi=oDiv.getElementsByTagName('li');
  51.  
    var aTxt=oDiv.getElementsByTagName('div')[0];
  52.  
     
  53.  
    for(var i=0;i<aLi.length;++i)
  54.  
    {
  55.  
    aLi[i].index=i;
  56.  
    aLi[i].onmouseover= function()
  57.  
    {
  58.  
    for(var i=0;i<aLi.length;++i)
  59.  
    {
  60.  
    aLi[i].className= '';
  61.  
    }
  62.  
    this.className='active';
  63.  
    aTxt.innerHTML= "<h2>"+(this.index+1)+"月活动</h2><p>"+arr[this.index]+"</p>";
  64.  
    };
  65.  
     
  66.  
    }
  67.  
    };
  68.  
    </script>
  69.  
    </body>
  70.  
    </html> 

 

javascript的学习整理（二）——小练习

题目要求：

1.      请设计一个HTML文档，文档名为html1.htm,当打开该文档时，将显示出如下的页面： 

该页面为一表格：

姓名       数学     计算机     外语     总分  

张三       78      92         85       255 

此处总分是通过计算得到！

还有两个按钮   “修改成绩” 和“关闭窗口” 

要求：1）．当点击“关闭窗口”时，提示“确定关闭窗口？”，点击确定则关闭当前窗口。  

2）．当点击“修改成绩”按钮时，可以在屏幕的中心位置打开html2.htm文档，

html2页面为一表格，文档结构如下：

数学       计算机      外语

文本框1    文本框2     文本框3

三个文本框：分别供输入数学、计算机、外语三门课的新成绩。

另有一个按钮：“修改数据”。 点击此按钮时，提示“是否确定修改？”，如果确定则修改。将所输入的新成绩修改到父窗口中的相应位置，同时重新计算总分的值。

HTML1：

  1.  
    <!doctype html>
  2.  
    <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>第三题</title>
  6.  
    <style>
  7.  
    table{width:400px;height:60px; text-align:center;}
  8.  
    input{width:55px;height:20px;}
  9.  
    .div1{width:400px;height:120px;}
  10.  
    #btn1{cursor:pointer;width:70px;height:30px;}
  11.  
    #btn2{cursor:pointer;width:70px;height:30px;}
  12.  
    /*#A{text-decoration:none;}*/
  13.  
    </style>
  14.  
    <script language="javascript">
  15.  
    //自定义提示关闭窗口
  16.  
    function custom_close()
  17.  
    {
  18.  
    if(confirm("确定关闭窗口?"))
  19.  
    {
  20.  
    window.opener=null;
  21.  
    window.open('',' _self ');
  22.  
    window.close();
  23.  
    }
  24.  
    else{}
  25.  
    }
  26.  
    function EntryPoint()
  27.  
    {
  28.  
    var style = 'dialogHeight:600px;dialogWidth:800px;center:Yes;status:no;help:0;scrool:yes';
  29.  
    var a = window.showModalDialog('html2.html', '', style);
  30.  
    //var a=window.showModalDialog("html2.html?temp="+Math.random(),"",style);
  31.  
    if (a == undefined)
  32.  
    {
  33.  
    a = window.returnValue;
  34.  
    }
  35.  
    // debugger;
  36.  
    if (a != null && a.length > 0)
  37.  
    {
  38.  
    document.getElementById("math").value = a[0];
  39.  
    document.getElementById("computer").value = a[1];
  40.  
    document.getElementById("English").value = a[2];
  41.  
    document.getElementById("sum").value =parseInt(a[0])+parseInt(a[1])+parseInt(a[2]);
  42.  
    }
  43.  
    }
  44.  
    </script>
  45.  
    </head>
  46.  
     
  47.  
    <body>
  48.  
    <div class="div1">
  49.  
    <table>
  50.  
    <tr>
  51.  
    <th>姓名</th>
  52.  
    <th>数学</th>
  53.  
    <th>计算机</th>
  54.  
    <th>外语</th>
  55.  
    <th>总分</th>
  56.  
    </tr>
  57.  
    <tr>
  58.  
    <td>张三</td>
  59.  
    <td><input type="text" name="math" id="math" value="78" style="border:0px;"/></td>
  60.  
    <td><input type="text" name="computer" id="computer" value="92" style="border:0px;"/></td>
  61.  
    <td><input type="text" name="English" id="English" value="85" style="border:0px;"/></td>
  62.  
    <td><input type="text" name="sum" id="sum" value="255" style="border:0px;"/></td>
  63.  
    </tr>
  64.  
    </table>
  65.  
    <br/>
  66.  
    <center>
  67.  
    <input type="button" value="修改成绩" id="btn1" onclick="EntryPoint()"/>
  68.  
                
  69.  
    <input type="submit" value="关闭窗口" id="btn2" onClick="custom_close()" />
  70.  
    </center>
  71.  
    </div>
  72.  
    </body>
  73.  
    </html>

HTML2：

    1.  
      <!doctype html>
    2.  
      <html>
    3.  
      <head>
    4.  
      <meta charset="utf-8">
    5.  
      <title>html2</title>
    6.  
      <style>
    7.  
      input{width:60px;}
    8.  
      #btn1{cursor:pointer;width:70px;height:30px;}
    9.  
      </style>
    10.  
       
    11.  
      <script type="text/javascript">
    12.  
      function postValue()
    13.  
      {
    14.  
      alert( "是否确定修改？");
    15.  
      var math = document.getElementById("math").value;
    16.  
      var computer = document.getElementById("computer").value;
    17.  
      var English = document.getElementById("English").value;
    18.  
      var a = new Array();
    19.  
      a[ 0] = math;
    20.  
      a[ 1] = computer;
    21.  
      a[ 2]=English;
    22.  
      //debugger;
    23.  
      if (window.opener != undefined)
    24.  
      {
    25.  
      //for chrome
    26.  
      window.opener.returnValue = a;
    27.  
      }
    28.  
      else
    29.  
      {
    30.  
      window.returnValue = a;
    31.  
      }
    32.  
      window.close();
    33.  
      }
    34.  
      </script>
    35.  
      </head>
    36.  
       
    37.  
      <body>
    38.  
      <table>
    39.  
      <tr>
    40.  
      <th>数学</th>
    41.  
      <th>计算机</th>
    42.  
      <th>外语</th>
    43.  
      </tr>
    44.  
      <tr>
    45.  
      <td><input type="text" name="math" id="math"/></td>
    46.  
      <td><input type="text" name="computer" id="computer"/></td>
    47.  
      <td><input type="text" name="English" id="English"/></td>
    48.  
      </tr>
    49.  
      </table>
    50.  
      <input type="button" value="修改数据" id="btn1" onclick="postValue();"/>
    51.  
      </body>
    52.  
      </html>

javascript的学习整理（三）

目录 ：

1、函数传参（arguments）

2、css函数的应用

3、获取非行间样式

4、数组的应用

5、json与数组的比较

1、函数传参：arguments---参数个数不确定。  arguments相当于数组。

  1.  
    <!DOCTYPE HTML>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>arguments的使用</title>
  6.  
    <script>
  7.  
    window.onload=function()
  8.  
    {
  9.  
    function sum()
  10.  
    {
  11.  
    var result=0;
  12.  
    for(var i=0;i<arguments.length;i++)
  13.  
    {
  14.  
    result+= arguments[i];
  15.  
    }
  16.  
     
  17.  
    return result;
  18.  
    }
  19.  
    //alert(sum(2,3,4,5));
  20.  
    alert(sum( 2,3,4,5,6,7,8));
  21.  
    };
  22.  
    </script>
  23.  
    </head>
  24.  
    <body></body>
  25.  
    </html>

2、css函数的使用：

  1.  
    <!DOCTYPE HTML>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>arguments的使用</title>
  6.  
    <script>
  7.  
    /*
  8.  
    *2、css函数：①判断arguments.length；----通过参数的长度来判断是获取样式还是设置样式。②给参数取名。增强可读性。
  9.  
    *
  10.  
    * css(对象,'属性')------获取样式；
  11.  
    * css（对象,'属性','属性值'）-------设置样式
  12.  
    */
  13.  
    function css(obj,name,value)
  14.  
    {
  15.  
    if(arguments.length==2)
  16.  
    {
  17.  
    return obj.style[name];
  18.  
    }
  19.  
    else
  20.  
    {
  21.  
    obj.style[name]=value;
  22.  
    }
  23.  
    }
  24.  
    window.onload=function()
  25.  
    {
  26.  
    var oDiv=document.getElementById('div1');
  27.  
     
  28.  
    //alert(css(oDiv,'width')); //获取样式
  29.  
    css(oDiv, 'background','lightblue');//设置样式；
  30.  
    };
  31.  
    </script>
  32.  
    </head>
  33.  
    <body>
  34.  
    <div id="div1" style="width:200px;height:100px;background:pink;">
  35.  
    2、css函数示例。
  36.  
    </div>
  37.  
    </body>
  38.  
    </html>

3、获取非行间样式：

① oDiv.style.width------获取行间样式
② oDiv.currentStyle.width------获取非行间样式-----------兼容性问题：只兼容IE。
③ getComputedStyle(oDiv,false).width;----火狐+chrome；（第二个参数false处，可写任意东西）-------在IE下不兼容。
④ 用if语句来解决兼容性问题

  1.  
    if(oDiv.currentStyle)
  2.  
    {
  3.  
    //IE
  4.  
    alert(oDiv.currentStyle.width);
  5.  
    }
  6.  
    else
  7.  
    {
  8.  
    //Firefox chrome
  9.  
    alert(getComputedStyle(oDiv,fasle).width);
  10.  
    }
⑤ 将常用的功能封装成一个函数，方便调用使用；
  1.  
    function getStyle(obj,name)
  2.  
    {
  3.  
    if(oDiv.currentStyle)
  4.  
    {
  5.  
    //IE
  6.  
    return obj.currentStyle[name];
  7.  
    }
  8.  
    else
  9.  
    {
  10.  
    //Firefox chrome
  11.  
    alert(getComputedStyle(obj,fasle).[name];
  12.  
    }
  13.  
    }

  使用时： 
getStyle(oDiv,width);
⑥ 复合样式：background、border等
    单一样式：width、height、backgroundColor等
  上述函数只能用于单一样式参数的提取。

4、数组的应用：

（1）定义：

  1.  
    var a=[1,2,3,4,5,6];
  2.  
    var a=new Array(1,2,3,4,5,6);
（2）常用属性的使用：length-----即可获取，也可设置
（3）数组的使用方法

    a.push(元素);   //在数组尾部添加元素；
    a.pop();     //在数组尾部删除元素；
    a.shift();   //在数组头部删除元素；
    a.unshift(元素);//在数组头部添加元素；
    a.splice（起点，长度）；//从（起点）开始删除（长度）个元素；
    a.splice（起点，0，元素,元素...）；//从（起点）开始添加元素；
    a.plice（起点，长度，元素...）；//替换

    例子：
  1.  
    <script>
  2.  
    var a=[1,2,3,4,5,6];
  3.  
    //a.push(10); //a=[1,2,3,4,5,6,10]
  4.  
    //a.pop(); //a=[1,2,3,4,5]
  5.  
    //a.shift(); //a=[2,3,4,5,6]
  6.  
    //a.unshift(9);//a=[9,1,2,3,4,5,6]
  7.  
    //a.splice(2,2);//a=[1,2,5,6];
  8.  
    //a.splice(2,0,'x','b','c');//a=[1,2,x,b,c,3,4,5,6]
  9.  
    a.splice( 2,2,'x','b');//a=[1,2,x,b,5,6]
  10.  
     
  11.  
    //alert(a);
  12.  
    < /script>
  13.  
     
（4）数组的链接concat    
  1.  
     
  2.  
    var a=[1,2,3];
  3.  
    var b=[4,5,6];
  4.  
    a.concat(b); //1,2,3,4,5,6
  5.  
    b.concat(a); //4,5,6,1,2,3
（5）数组的拼接join  
  1.  
     
  2.  
    a.join( '-'); //1-2-3(拼接符是 - )
  3.  
    a.join( '--p');//1--p2--p3（拼接符是 --p）
  4.  
    //拼接符号可以自由设置

 （6）数组的排序sort---只认识字符串

    ①字符串的排序：从左向右按字母顺序排序。
  1.  
    var arr=['float','width','height','color'];
  2.  
    arr.sort();
  3.  
    alert(arr); //arr=['color','float','height','width']
    ②数字的排序：----将数字当字符串处理
  1.  
    var arr=[12,114,8,24,245];
  2.  
    arr.sort();
  3.  
    alert(arr); //arr=[114,12,24,245,8]
    改进：------处理数字
  1.  
    arr.sort( function(n1,n2)
  2.  
    {
  3.  
    if(n1<n2)
  4.  
    {
  5.  
    return -1;
  6.  
    }
  7.  
    else if(n1>n2)
  8.  
    {
  9.  
    return 1;
  10.  
    }
  11.  
    else
  12.  
    {
  13.  
    return 0;
  14.  
    }
  15.  
    });
   简化：
  1.  
    arr.sort(function(){
  2.  
    return n1-n2;
  3.  
    });

5、json与数组之间的比较

①什么是json?

  1.  
    <script>
  2.  
    /*
  3.  
    *注意事项：
  4.  
    *1、json类似于数组，但是使用的事花括号{}；
  5.  
    *2、定义：var json={变量名：变量值， 变量名：变量值，....};
  6.  
    *3、提取json中的元素：json.变量名
  7.  
    *4、提取到的元素可以进行相应的处理
  8.  
    */
  9.  
    var json={a:12,b:7,c:'xdef'};
  10.  
     
  11.  
    // alert(json.a); //提取json中的元素
  12.  
     
  13.  
    json.b++; //对json中的元素b进行自增处理
  14.  
    alert(json.b);
  15.  
    </script>

②区别
  1.  
    var arr=[1,3,4];
  2.  
    var json={a=1,b=3,c=4};
  3.  
     
  4.  
    alert(arr[ 0]); //弹出1
  5.  
    alert(json.a); //弹出1
  6.  
    alert(json[ 'a']); //弹出1
由上可以观察出：区别1：json的下标是字符，而数组的下标是数字
  1.  
    //循环(两种表示)：
  2.  
     
  3.  
    //① 使用到length
  4.  
     
  5.  
    for(var i=0;i <arr.length;i++)
  6.  
    {
  7.  
    alert('第'+i+'个东西:'+arr[i]);
  8.  
    }
  9.  
    //② 未使用到length
  10.  
     
  11.  
    for(var i in arr)
  12.  
    {
  13.  
    alert('第'+i+'个东西:'+arr[i]);
  14.  
    }
  15.  
     
  16.  
     
  17.  
    for(var i in json)
  18.  
    {
  19.  
    alert('第'+i+'个东西:'+json[i]);
  20.  
    }
区别2：json没有length，而数组有length;(涉及循环的使用)。所以json循环时用 for --in  结构。

JavaScript的学习整理（四）

目录：

1、类型转换

2、全局变量

3、命名规范

4、运算符（%）的使用

1、类型转化（强制类型转换）

  1.  
    var a='12';
  2.  
    parseInt(a); //a=12(字符串转化成数字)
  3.  
    parseFloat(a);//转换成浮点数
功能：从左到右开始扫描，碰见非数字的字符时就跳出。

例子：

  1.  
    var a='12px';
  2.  
    parseInt(a);//a=12
  3.  
     
  4.  
    var a='23pn45';
  5.  
    parseInt(a);//a=12

(1) isNAN(a);  判断变量a是否为NAN；

应用：求两数之和；

  1.  
    <input type="text" id='txt1'/> 
  2.  
    <input type="text" id='txt2'/> 
  3.  
    <input type='button' id='btn1' value="求和"/>
  4.  
     
  5.  
    <script>
  6.  
    window.onload=function()
  7.  
    {
  8.  
    var oTxt1=document.getElementById('txt1');
  9.  
    var oTxt2=document.getElementById('txt2');
  10.  
    var oBtn1=document.getElementById('btn1');
  11.  
     
  12.  
    oBtn1.onclick= function()
  13.  
    {
  14.  
    var n1=parseInt(oTxt1.value);
  15.  
    var n2=parseInt(oTxt2.value);
  16.  
     
  17.  
    if(isNaN(n1))
  18.  
    {
  19.  
    alert( "您输入的第一个值有误！请重新输入");
  20.  
    }
  21.  
    else if(isNaN(n2))
  22.  
    {
  23.  
    alert( "您输入的第二个值有误！请重新输入");
  24.  
    }
  25.  
    else
  26.  
    {
  27.  
    alert(n1+n2);
  28.  
    }
  29.  
    };
  30.  
     
  31.  
    };
  32.  
    </script>
（2）隐式类型转换

    ==   先转换类型，然后再进行比较；
    ===  直接进行比较。
    

    例子：

  1.  
    var a=2;
  2.  
    var b='2';
  3.  
     
  4.  
    alert(a==b); //true
  5.  
    alert(a===b); //false
  6.  
    //所以一般最好用'==='(三个等号)来进行比较，更加严谨。
 （3）+ ：①字符串链接 ②数字相加
            - ：只有数字相减的功能
  1.  
    var a='12';
  2.  
    var b='3';
  3.  
     
  4.  
    alert(a+b); //123
  5.  
    alert(a-b); //9
  6.  
     

2、全局变量

  1.  
    <script>
  2.  
     
  3.  
    var a=3;//全局变量(在任何地方都能使用和修改)
  4.  
     
  5.  
    function aaa()
  6.  
    {
  7.  
    a= 12;
  8.  
    }
  9.  
    function bbb()
  10.  
    {
  11.  
    a+= 12;
  12.  
    }
  13.  
     
  14.  
    aaa();
  15.  
    bbb();
  16.  
     
  17.  
    //alert(a);//弹出24
  18.  
     
  19.  
    < /script>

3、命名规范：


 类型    前缀     类型

 数组     a        Array
 布尔值   b        Boolean
 浮点数   f        Float
 函数     fn       Function
 整数     i        Integer
 对象     o        Object
 字符串   s        String
 变体变量 v        Variant

4、运算符（%）

例子1：隔行变色

  1.  
    <ul>
  2.  
    <li></li>
  3.  
    <li></li>
  4.  
    <li></li>
  5.  
    <li></li>
  6.  
    <li></li>
  7.  
    <li></li>
  8.  
    <li></li>
  9.  
    <li></li>
  10.  
    </ul>
  11.  
     
  12.  
    <script>
  13.  
    window.onload=function()
  14.  
    {
  15.  
    var aLi=document.getElementsByTagName('li');
  16.  
     
  17.  
    for(var i=0;i<aLi.length;i++)
  18.  
    {
  19.  
    if(i%2==0)
  20.  
    {
  21.  
    aLi[i].style.background= '#CCC';
  22.  
    }
  23.  
    else
  24.  
    {
  25.  
    aLi[i].style.background= '';
  26.  
    }
  27.  
    }
  28.  
     
  29.  
    };
  30.  
    </script>
例子2：秒转时间
  1.  
    var a=125;
  2.  
    alert( parseInt(a/60)+'分'+a%60+'秒'); //2分5秒


猜你喜欢

转载自www.cnblogs.com/aiwuxia/p/9419636.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022