笑傲独行侠的代码

笑傲独行侠

男北京 JAVA开发工程师更多信息

744h 学习时长

9134 经验

50 积分

2 关注

6 粉丝

课程 \ JavaScript进阶篇

JavaScript进阶篇

代码 112 问答 0

按时间按章节

9-3 getElementsByTagName()方法

<!DOCTYPE HTML>

<html>  

<head>  

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

<title>JavaScript</title>  

</head>  

<body>  

    

        <form name="Input">

            <table align="center" width="500px" height="50%" border="1">

                <tr>

                    <td align="center" width="100px">

                        学号:

                    </td>

                    <td align="center" width="300px">

                        <input type="text" id=userid name="user" onblur="validate();">

                        <div id=usermsg></div>

                    </td>

                </tr>

                <tr>

                    <td align="center" width="100px">

                        姓名:

                    </td>

                        <td align="center">

                        <input type="text" name="name">

                    </td>

                </tr>

                <tr>

                    <td align="center" width="%45">

                        性别:

                    </td>

                    <td align="center">

                        <input type="radio" name="sex" value="男">

                        男

                        <input type="radio" name="sex" value="女">

                        女

                    </td>

                </tr>

                <tr>

                    <td align="center" width="30%">

                        年龄:

                    </td>

                    <td align="center" width="300px">

                        <input type="text" name="age">

                    </td>

                </tr>

                <tr>

                    <td align="center" width="100px">

                        地址:

                    </td>

                    <td align="center" width="300px">

                        <input type="text" name="addr">

                    </td>

                </tr>



            </table>

        </form>

        <h1 id="myHead" onclick="getValue()">

            看看三种获取节点的方法?

        </h1>

        <p>

            点击标题弹出它的值。

        </p>

        <input type="button" onclick="getElements()"

            value="看看name为sex的节点有几个?" />

        <Br>

        <input type="button" onclick="getTagElements()"

            value="看看标签名为input的节点有几个?" />

            

     <script type="text/javascript">

         function getValue()

          {

              var myH=document.getElementById("myHead");

              alert(myH.innerHTML)

          }

          function getElements()

          {

              var myS=document.getElementsByName("sex");

              alert(myS.length);

          }



          function getTagElements()

          {

              var myI=document.getElementsByTagName("input");

              alert(myI.length);

          }

         

     </script>        



    </body>

</html>

2018-09-15 查看完整代码

9-2 getElementsByName()方法

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function getnum(){

  var mynode= document.getElementsByName("myt")        ;  

  alert(mynode.length);

}

</script>

</head>

<body>

<input name="myt" type="text" value="1">

<input name="myt" type="text" value="2">

<input name="myt" type="text" value="3">

<input name="myt" type="text" value="4">

<input name="myt" type="text" value="5">

<input name="myt" type="text" value="6">



<br />

<input type="button" onclick="getnum()" value="看看有几项？" />

</body>

</html>

2018-09-15 查看完整代码

9-1 认识DOM

<!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 con=document.getElementById("con");  

    con.style.color="red";

    con.style.backgroundColor="#CCC";

    con.style.display="none";

  </script>

</body>

</html>

2018-09-15 查看完整代码

8-17 编程练习

<!DOCTYPE html>

<html>

 <head>

  <title>浏览器对象</title>  

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

 </head>

 <body>

  <!--先编写好网页布局-->

  <h1>操作成功</h1>

  <h2><span id="se"></span>秒后回到主页 <a onclick="goback()">返回</a></h2>

 

  <script type="text/javascript">  

   

   //获取显示秒数的元素，通过定时器来更改秒数。

   setInterval("yanshi()",1000);

   var num=5;

   function yanshi(){

       document.getElementById("se").innerHTML=num;

       num=num--;

   }

   //通过window的location和history对象来控制网页的跳转。

   function goback(){

       window.history.back();

   }

   setTimeout("gogogo()",5000);

   function gogogo(){

   window.location.href='http:www.baidu.com';

}

 </script> 

</body>

</html>

2018-09-15 查看完整代码

8-16 屏幕可用高和宽度

<!DOCTYPE HTML>

<html>

<head>

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

<title>屏幕分辨率的高和宽</title>

</head>

<body>

<script type="text/javascript">

document.write("可用宽度：" +window.screen.availWidth);

document.write("可用高度：" +window.screen.availHeight); );     

</script>

</body>

</html>

2018-09-15 查看完整代码

8-15 屏幕分辨率的高和宽

<!DOCTYPE HTML>

<html>

<head>

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

<title>屏幕分辨率的高和宽</title>

</head>

<body>

<script type="text/javascript">

document.write( "屏幕宽度："+window.screen.width);

document.write( "屏幕高度："+window.screen.height);       

</script>

</body>

</html>

2018-09-15 查看完整代码

8-14 screen对象

2018-09-15 查看完整代码

8-12 Navigator对象

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

</head>

<script type="text/javascript">

  

  

</script>

<body>

</body>

</html>

2018-09-15 查看完整代码

8-11 Location对象

<!DOCTYPE HTML>

<html>

<head>

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

<title>location</title>

</head>

 <script type="text/javascript">

        document.write(window.location.href);

     

 </script>



<body>

</body>

</html>

2018-09-15 查看完整代码

8-10 返回浏览历史中的其他页面

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

</head>

 <script type="text/javascript">

        function GoBack() {

            window.history.go(-1);

        }



        function GoForward() {

            window.history.go(1);

        }

    </script>



<body>

    点击下面的锚点链接，添加历史列表项:    

    <br />

    <a href="#target1">第一个锚点</a>

    <a name="target1"></a>

    <br />

    <a href="#target2">第二个锚点</a>

    <a name="target2"></a>

    <br /><br />

    使用下面按钮，实现返回前或下一个页面:

    <form>

       <input type="button"  value="返回前一个页面" onclick="GoBack();" />

       <input type="button"  value="返回下一个页面" onclick="GoForward();" /> 

    </form>

</body>

</html>

2018-09-15 查看完整代码

8-9 返回下一个浏览的页面

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

<script type="text/javascript">

        function GoForward() {

            window.history.forward();

        }

</script>

</head>

 



<body>

点击下面的锚点链接，添加历史列表项:    

    <br />

    <a href="#target1">第一个锚点</a>

    <a name="target1"></a>

    <br />

    <a href="#target2">第二个锚点</a>

    <a name="target2"></a>

    <br /><br />

    使用下面按钮，实现返回下一个页面:

    <form>

       <input type="button"  value="返回下一个页面" onclick="GoForward()" />        

    </form>

</body>

</html>

2018-09-15 查看完整代码

8-8 返回前一个浏览的页面

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

<script type="text/javascript">

        function GoBack() {

            window.history.back();

        }

       

</script>

</head>

 



<body>

点击下面的锚点链接，添加历史列表项:

    

    <br />

    <a href="#target1">第一个锚点</a>

    <a name="target1"></a>

    <br />

    <a href="#target2">第二个锚点</a>

    <a name="target2"></a>

    <br /><br />

    使用下面按钮，实现返回前一个页面:

    <form>

       <input type="button"  value="返回前一个页面" onclick="GoBack();" />        

    </form>

</body>

</html>

2018-09-15 查看完整代码

8-7 History 对象

<!DOCTYPE HTML>

<html>

<head>

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

<title>History对象</title>

</head>

<script type="text/javascript">

  var HL = window.history.length   ;

  document.write(HL);

</script>

<body>

</body>

</html>

2018-09-15 查看完整代码

8-6 取消计时器clearTimeout()

<!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>

2018-09-14 查看完整代码

8-5 计时器setTimeout()

<!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>

2018-09-14 查看完整代码

8-4 取消计时器clearInterval()

<!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 a=setInterval("clock()",100);     

</script>

</head>

<body>

  <form>

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

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

  </form>

</body>

</html>

2018-09-14 查看完整代码

8-3 计时器setInterval()

<!DOCTYPE HTML>

<html>

<head>

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

<title>定时器</title>

<script type="text/javascript">

  var attime;

  function clock(){

    var time=new Date();          

    attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

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

  }

  setInterval(clock,1000);

</script>

</head>

<body>

<form>

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

</form>

</body>

</html>

2018-09-14 查看完整代码

8-2 JavaScript 计时器

2018-09-14 查看完整代码

8-1 window对象

<!DOCTYPE HTML>

<html>

<head>

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

<title>window对象</title>

<script type="text/javascript">

   alert("欢迎来到慕课网！");

   function openn(){

        window.open('http//www.baidu.com','_blank','width= 600,height=400');

   }

</script>

</head>

<body>

<form>

<input type="button" value="点击我，打开新窗口" onclick="openn()"/>

</form>

</body>

</html>

2018-09-14 查看完整代码

7-23 编程练习

<!DOCTYPE  HTML>

<html >

<head>

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

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



<script type="text/javascript">



  //通过javascript的日期对象来得到当前的日期，并输出

  var date=new Date();

  var year=date.getFullYear();

  var month=date.getMonth();

  var day=date.getDate();

  var week=['  星期一','  星期二','  星期三','   星期四',

 '  星期五',"  星期六","  星期日"];

  document.write(year+"年"+month+"月"+day+"日"+week[date.getDay()-1]);

  //成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦

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

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

  var score1=0;

  //从数组中将成绩撮出来，然后求和取整，并输出。

  

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

      score1=parseInt(score[i].substring(3,5))+parseInt(score1);

  }

  document.write("平均分是"+Math.round(score1/score.length));



</script>

</head>

<body>

</body>

</html>

2018-09-14 查看完整代码

首页上一页 1 2 3 4 5 6 下一页尾页

热搜

最近搜索清空

笑傲独行侠

JavaScript进阶篇