为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
JavaScript进阶篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
  • 使用parseInt()函数可解析一个字符串,并返回一个整数

    查看全部
    0 采集 收起 来源:编程练习

    2018-11-14

  • <!DOCTYPE  HTML>

    <html >

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>系好安全带,准备启航</title>

    <script type="text/javascript">

     var week=["星期一","星期二","星期三","星期四","星期五","星期六","星期天"];

         var date = new Date();

         document.write(date.getFullYear() + "年");

         document.write(date.getMonth()+"月");

         document.write(date.getDate()+"日");

         document.write("&nbsp"+week[date.getDay() - 1]);

         var sum = 0;

         var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";

         var arr=[];

         var a = scoreStr.split(";");

         for (var i = 0; i < a.length;i++){

             arr[i] = a[i].substring(3, 5);

             sum = Number(arr[i]) + sum;  

         }

         document.write("</br>班级平均分:"+sum / arr.length);

    </script>

    </head>

    <body>

    </body>

    </html>


    查看全部
    1 采集 收起 来源:编程练习

    2018-11-14

  • <!DOCTYPE html>

    <html>

     <head>

      <title> new document </title>  

      <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   

      <script type="text/javascript"> 

      

          window.onload = function(){

                      

         // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

              

       var table=document.getElementById("table");

           var trs = table.getElementsByTagName("tr"); 

              for(var i=0;i<trs.length;i++)

              {

                  trs[i].onmouseover=function()

                  {

                      //alert(trs.length);

                      this.style.backgroundColor="#f2f2f2";

                  }

                  trs[i].onmouseout=function()

                  { 

                      this.style.backgroundColor=""; 

                  }

              } 

         

     

    }

         

          // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;

          function createa(){

              

                var num=document.getElementById("table").childNodes.length+1;

                

                var ntr=document.createElement("tr");

                var ntd_1=document.createElement("td");

                var ntd_2=document.createElement("td");

                var ntd_3=document.createElement("td");


                ntd_1.innerHTML="xh00"+num;

                ntd_2.innerHTML="第"+num+"位同学";

                ntd_3.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";


                var tab=document.getElementById("table");


                tab.appendChild(ntr);

                ntr.appendChild(ntd_1);

                ntr.appendChild(ntd_2);

                ntr.appendChild(ntd_3);


                var obj=document.getElementsByTagName("tr");

                

                for (var i=0;i<obj.length;i++){


                bacchange(obj[i]);    

            

          }

          

          }

        /*

          function delete(obj)

        {

            var tbody=document.getElementById("table").lastChild;

            var tr=obj.parentNode.parentNode;

            tbody.removeChild(tr);

        }

        */

         // 创建删除函数

         function del(obj)

         {

             var tr = obj.parentNode.parentNode;

             var tb = tr.parentNode;

             tb.removeChild(tr);

             

         } 

         

         



      </script> 

     </head> 

     <body> 

       <table border="1" width="50%" id="table">

       <tr>

    <th>学号</th>

    <th>姓名</th>

    <th>操作</th>

       </tr>  


       <tr>

    <td>xh001</td>

    <td>王小明</td>

    <td><a href="javascript;" onclick="del(this);">删除</a></td>   

    <!--在删除按钮上添加点击事件  -->

       </tr>


       <tr>

    <td>xh002</td>

    <td>刘小芳</td>

    <td><a href="javascript:;" onclick="del(this)" >删除</a></td>   

    <!--在删除按钮上添加点击事件  -->

       </tr>  



       </table>

       <input type="button" value="添加一行" onclick ="createa()" />  

       <!--在添加按钮上添加点击事件  -->

     </body>

    </html>


    查看全部
    1 采集 收起 来源:编程练习

    2018-11-14

  • function highlight(obj){

    obj.onmouseout = function(){

    obj.style.backgroundcolor = "red";

    }}

    window.onload = function(){}

    在页面加载完成之后再执行,正常执行顺序是从上到下,如果按顺序执行,下方的html是没法获取的,等页面加载完再加载这段js

     0


    查看全部
    0 采集 收起 来源:编程练习

    2018-11-14

  • .history.go()

    1代表下一页

    -1代表上一页

    查看全部
  • 函数内的计时器只有当函数被调用的时候才会执行,所以要创建一个自动执行的计数器,需要在函数内也相同的创建一个,或者使用setinterval计数器

    查看全部
  • 在设置clearinterval的时候,一定要用一个变量来存放setinterval的值,否则,clearinterval将不会起作用

    查看全部
  • 语法:

    setInterval(代码,交互时间);

    参数说明:

    1. 代码:要调用的函数或要执行的代码串。

    2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。

    返回值:

    一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。


    查看全部
  • JavaScript 计时器

    在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。
    计时器类型:
    一次性计时器:仅在指定的延迟时间之后触发一次。
    间隔性触发计时器:每隔一定的时间间隔就触发一次。


    查看全部
  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>style样式</title>

    </head>

    <body>

      <h2 id="con">I love JavaScript</H2>

      <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>

      <script type="text/javascript">

       var mycn=document.getElementById("con");

       mycn.style.color='red';

       mycn.style.backgroundColor='#CCC';

       function onit(){

       mycn.style.display='none';

           

       }

       function overit(){

       mycn.style.display='block';

           

       }

      </script>

        <input type="button" value="隐藏" name="hide" onclick="onit()">

        <input type="button" value="显示" name="show" onclick="overit()">

    </body>

    </html>


    查看全部
    0 采集 收起 来源:认识DOM

    2018-11-14

  • 当把字符串进行分割,并放入数组中的时候,都是字符串的形式,如果需要进行运算,则需要先把数组中的字符串进行转化为数值,否则会报错

    分割字符串的时候需要找到规律,substring(开始,结束)该方法是需要你提供分割字符串开始及结束的字符串下标,其中,结束为下标+1

    在申明一个用来求和或者是用来存放数值的变量的时候,一定需要先进行初始化操作,归零

    查看全部
    0 采集 收起 来源:编程练习

    2018-11-13

  • 没有这么复杂,方法函数中会比较a与b的大小

    返回值<=-1,则为升序排列

    返回值>-1&&<1的,则为并列排序

    返回值>1的,则是降序排列

    查看全部
    0 采集 收起 来源: 数组排序sort()

    2018-11-13

  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>计时器</title>


    <script type="text/javascript">

      var num=0;

      var i;

      function startCount(){

        document.getElementById('count').value=num;

        num=num+1;

        i=setTimeout("startCount()",1000);

      }

      function stopCount(){

      clearTimeout(i);

      }

    </script>

    </head>

    <body>

      <form>

        <input type="text" id="count" />

        <input type="button" value="Start" onclick="startCount()" />

        <input type="button" value="Stop"  onclick="stopCount()" />

      </form>

    </body>

    </html>


    查看全部
  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>计时器</title>

    <script type="text/javascript">

      var num=0;

      function startCount() {

        document.getElementById('count').value=num;

        num=num+1;

       

      }  setTimeout("startCount()",1000);

      

    </script>

    </head>

    <body>

    <form>

    <input type="text" id="count"/>

    <input type="button" value="start" onclick="startCount()">

    </form>

    </body>

    </html>


    查看全部
  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>计时器</title>

    <script type="text/javascript">

       function clock(){

          var time=new Date();                  

          document.getElementById("clock").value = time;

       }

         var int = setInterval(clock,100);

    </script>

    </head>

    <body>

      <form>

        <input type="text" id="clock" size="50"  />

        <input type="button" value="Stop" onclick="clearInterval(int)" />

      </form>

    </body>

    </html>


    查看全部

举报

0/150
提交
取消
课程须知
你需要具备HTML、css基础知识,建议同学们也可以想学习下js入门篇,快速认识js,熟悉js基本语法,更加快速入手进阶篇!
老师告诉你能学到什么?
通过JavaScript学习,掌握基本语法,制作简单交互式页面
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!