xxxx3635041的代码

xxxx3635041

女更多信息

731h 学习时长

7913 经验

2 积分

10 关注

4 粉丝

课程 \ JavaScript进阶篇

JavaScript进阶篇

代码 109 问答 2

按时间按章节

7-1 什么是对象

<html>

<head>

 <script type="text/javascript">

   var myarray=new Array(5);

   var my1=myarray.length;

   var myarray3="hello world"

   var my2=myarray3.toUpperCase();

   document.write("数组长度:"+my1+"<br>");

   document.write("大写："+my2);

 </script>

</head>

<body>

</body>

</html>

2016-11-11 查看完整代码

6-11 编程练习

<!DOCTYPE html>

<html>

 <head>

  <title> 事件</title>  

  <script type="text/javascript">

   function count(){

   var a= document.getElementById("txt1");

   var b= document.getElementById("txt2");

   var c= docment.getElementById("select");

   var result="";

   swithch(c){

       case "+":

           result=parseFloat(a)+parseFloat(b);

           break;

         case "+":

           result=parseFloat(a)-parseFloat(b);

           break;

             case "+":

           result=parseFloat(a)*parseFloat(b);

           break;          

             default:

            result=parseFloat(a)/parseFloat(b); 

   }

   document.getElementById().value=result;

   }

  </script> 

 </head> 

 <body>

 <input type="text" id="txt1">

 <select id="select">

     <option value="+">+</option>

      <option value="-">-</option>

       <option value="*">*</option>

        <option value="/">/</option>

 </select>

 <input type="text" id="txt2">

 <input type="button" value="=" onclick="count()">

 <input type="text" id="fruit">



 </body>

</html>

2016-11-10 查看完整代码

6-10 卸载事件（onunload）

<!DOCTYPE HTML>

<html>

<head>

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

<title> 卸载事件 </title>

<script type="text/javascript">   

     window.onunload = onunload_message;   

     function onunload_message(){   

        alert("您确定离开该网页吗？");   

    }   

</script>   

</head>

<body >

  欢迎学习JavaScript。

</body>

</html>

2016-11-10 查看完整代码

6-7 内容选中事件（onselect）

<!DOCTYPE HTML>

<html>

<head>

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

<title> 内容选中事件 </title>

<script type="text/javascript">

  function message(){

    alert("您触发了选中事件！"); }

</script>    

</head>

<body>

  <form>

  个人简介：<br>

   <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>

  </form>

</body>

</html>

2016-11-10 查看完整代码

6-8 文本框内容改变事件（onchange）

<!DOCTYPE HTML>

<html>

<head>

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

<title> 文本框内容改变事件 </title>

<script type="text/javascript">

  function message(){

    alert("您改变了文本内容！"); }

</script>    

</head>

<body>

  <form>

  个人简介：<br>

 

   <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>

  </form>

 

</body>

</html>

2016-11-10 查看完整代码

6-9 加载事件（onload）

<!DOCTYPE HTML>

<html>

<head>

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

<title> 加载事件 </title>

<script type="text/javascript">

  function message(){

    alert("加载中，请稍等…"); }

</script>    

</head>

<body onload="message()">

  欢迎学习JavaScript。

 

</html>

2016-11-10 查看完整代码

6-6 失焦事件（onblur）

<!DOCTYPE HTML>

<html>

<head>

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

<title> 失焦事件 </title>

<script type="text/javascript">

  function message(){

    alert("请确定已输入密码后，在移开!"); }

</script>    

</head>

<body>

  <form>

   用户:<input name="username" type="text" value="请输入用户名！" onblur="message()">

   密码:<input name="password" type="text" value="请输入密码！" >

  </form>

</body>

</html>

2016-11-10 查看完整代码

6-5 光标聚焦事件（onfocus）

<!DOCTYPE HTML>

<html>

<head>

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

<title> 光标聚焦事件 </title>

  <script type="text/javascript">

    function message(){

	  alert("请选择，您现在的职业！");

	}

  </script>

</head>

<body>

请选择您的职业：<br>



  <form>

  <input type="text" value="姓名" name="username" onfocus="message()">

    <select name="career"> 

      <option>学生</option> 

      <option>教师</option> 

      <option>工程师</option> 

      <option>演员</option> 

      <option>会计</option> 

    </select> 

  </form>

</body>

</html>

2016-11-08 查看完整代码

6-4 鼠标移开事件（onmouseout）

<!DOCTYPE HTML>

<html>

<head>

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

<title>鼠标移开事件 </title>

<script type="text/javascript">

  function message(){

    alert("不要移开，点击后进行慕课网!"); }

</script>

</head>

<body>

<form>

密码：<input type="text" name="text" onmouseout="message()">

  <input type="button" value="登录" onmouseout="message()">

  <a href="http://www.imooc.com">点击我</a>

</form>

</body>

</html>

2016-11-08 查看完整代码

6-3 鼠标经过事件（onmouseover）

<!DOCTYPE HTML>

<html>

<head>

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

<title> 鼠标经过事件 </title>

<script type="text/javascript">

    function message(){

      confirm("请输入密码后，再单击确定!"); }

</script>

</head>

<body>

<form>

密码:<input name="password" type="password"  >

<input name="确定" type="button" value="确定" onmouseover="message()"/>

</form>

</body>

</html>

2016-11-08 查看完整代码

6-2 鼠标单击事件( onclick ）

<!DOCTYPE HTML>

<html>

<head>

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

<title>单击事件 </title>

<script type="text/javascript">

  function openwin(){

     var window.open('http://www.imooc.com','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');

     window.close();}

</script>

</head>

<body>

  <form>

    <input name="点击我" type="button" value="点击我" onclick="openwin()"/>

  </form>

</body>

</html>

2016-11-08 查看完整代码

6-1 什么是事件

<html>

    <head>

        <title>什么是事件</title>

    

    </head>

    <body>

        <p>

            js创建动态页面，事件是可以被js侦测到的行为，网页中的每个元素都可以产生某些可以触发js函数或程序的事件。

        </p>

    </body>

</html>

2016-11-08 查看完整代码

5-6 编程练习

<!DOCTYPE  HTML>

<html >

<head>

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

<title>函数</title>



<script type="text/javascript">



//定义函数



function add(a,b)

{

    

    if(a<b){

        return b;

    }

    else if(a>b){

    

        return(a);

    }

    else{

        return (a);

    }

}





  document.write(" 5 和 5 的较大值是:"+add(5,7)+"<br>");

  document.write(" 6 和 3 的较大值是:"+add(3,6)+"<br>" ); 









</script>

</head>

<body>

</body>

</html>

2016-11-08 查看完整代码

5-4 有参数的函数

<!DOCTYPE HTML>

<html>

<head>

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

<title>函数传参</title>

<script type="text/JavaScript">

   function   add3(x,y,z)              

	{

	  sum = x + y +z;

	  document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");

	}

	 add3(5,8,3);

     add3(7,1,4);

	 

</script>

</head>

<body>

</body>

</html>

2016-11-08 查看完整代码

5-3 函数调用

<!DOCTYPE HTML>

<html>

<head>

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

<title>函数调用</title>

<script type="text/javascript">

function tcon()

  {

	alert("恭喜你学会函数调用了!");

  }

</script>

</head>

<body>

<form>

<input type="button"  value="点点我" onclick="tcon()">  

</form>

</body>

</html>

2016-11-08 查看完整代码

5-2 定义函数

<!DOCTYPE HTML>

<html>

<head>

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

<title>定义函数</title>

<script type="text/javascript">

    function sub2(a,b)                     //定义函数

 {

   sub=a-b;

   alert("5和2的差:"+sub);

 }

 sub2(5,2);

</script>

</head>

<body>



</body>

</html>

2016-11-08 查看完整代码

5-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=utf-8" />



</head>

<body>

<script style="text/javascript">

    function add2(a,b)

    {

        sum=a+b;

        alert(sum);

        document.write("sum:"+sum+"<br>");

    }

    

    add2(3,2);

    add2(7,8);



</script>

<form>

    <input  type="button" value="点击" onclick="add2(3,7)">

</form>

</body>

</html>

2016-11-08 查看完整代码

4-10 编程练习

<!DOCTYPE  HTML>

<html >

<head>

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

<title>流程控制语句</title>

<script type="text/javascript">



 //第一步把之前的数据写成一个数组的形式,定义变量为 infos

 var infos=[

     ['小A','女',21,'大一'],  

     ['小B','男',23,'大三'],

     ['小C','男',24,'大四'],  

     ['小D','女',21,'大一'],

     ['小E','女',22,'大四'], 

     ['小F','男',21,'大一'],

     ['小G','女',22,'大二'],  

     ['小H','女',20,'大三'],

     ['小I','女',20,'大一'], 

     ['小J','男',20,'大三'],

    ];

 for(i=0;i<infos.length;i++)

 {

     if (infos[i][3]=="大一" && infos[i][1]=="女")

     {

         document.write("大一女生的信息："+infos[i][0]+"<br>");

     }

 }

 

 //第一次筛选，找出都是大一的信息

 

  

 //第二次筛选，找出都是女生的信息

 

 

  

</script>

</head>

<body>

</body>

</html>

2016-11-08 查看完整代码

3-7 二维数组

<!DOCTYPE HTML>

<html>

<head>

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

<title>二维数组</title>

<script type="text/javascript">

var myarr=new Array();

for(var i=1;i<3;i++)

{

    myarr[i]=new Array();

    for(var j=1;j<6;j++)

    {

        myarr[i][j]=i*j;

       document.write("myarr["+i+"]["+j+"]的值:"+myarr[i][j]+"<br>"); 

    }

    

}   

</script>

</head>



<body>

</body>

</html>

2016-11-07 查看完整代码

4-9 继续循环continue

<!DOCTYPE HTML>

<html>

<head>

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

<title>continue</title>

<script type="text/JavaScript">

var mynum=new Array(60,70,80,90,100,50,34);

for(i=0;i<=6;i++)

{

    if(mynum[i]<60)

    {

        document.write("成绩不合格，不输出"+"<br>");

        continue;

    }

    document.write("成绩合格，继续输出"+mynum[i]+"<br>");

}

</script>

</head>

<body>

</body>

</html>

2016-11-07 查看完整代码

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

热搜

最近搜索清空

xxxx3635041

JavaScript进阶篇