你的位置:首页 > Java教程

[Java教程]小试牛刀2:JavaScript基础题


JavaScript基础题

1、网页中有个字符串“我有一个梦想”,使用JavaScript获取该字符串的长度,同时输出字符串最后两个字。

答案:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js</title> 6 </head> 7  8 <body> 9 <script type="text/javascript">10   var str = "我有一个梦想";11   len = str.length;12   st = str.substr(4,2);13   document.write("字符串长度为:" + len + "<br>" + "字符串最后两个字为:" +st);14 </script>15 </body>16 </html>

  结果:

  *还可以通过字符串长度.length属性来动态截取字符串*:

1 <script type="text/javascript">2   var str = "我有一个梦想";3   st = str.substr(str.length-2,2);  4   document.write("字符串最后两个字为:" +st);5 </script>

  结果:


 

2、制作成绩输出表,判断学生的成绩是否大于60,是的话在页面中输出“你及格了”,不是的话则输出“你不及格”。

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js</title> 6 </head> 7  8 <body> 9 <script type="text/javascript">10   function checktext() {11     var str = document.getElementById("text").value;12     if (str>60)  13       alert("你及格了");14     else 15       alert("你不及格");16   }17 </script>18 19 请输入成绩:<input type="text" id="text" />20     <input type="button" onclick="checktext()" value="提交" />21 </body>22 </html>

  结果:


3、输出九九乘法表

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js</title> 6 </head> 7  8 <body> 9 <script type="text/javascript">10   var arr = new Array(new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array());   //定义二维数组11   var i , j ;  //i表示九九乘法表里的行,j表示列12   for(j = 1 ; j <= 9 ; j++) {13     for(i = 1 ; i <= 9 ; i++) {14       if(j<=i) 15         arr[i-1][j-1] = i * j ;16     }17   }18   for(i = 1 ; i <= 9 ; i++) {19     for(j = 1 ; j <= 9 ; j++) {20       if(j<=i)21         document.write(" "+j+"*"+i+"="+arr[i-1][j-1]);22     }23     document.write("<br>");24   }25 </script>26 </body>27 </html>

  效果:


4、页面中一个文本输入框,当该文本框获得焦点时,弹出一个窗口提示用户“你获得了文本框”;当文本框失去焦点时,弹出一个窗口提示用户“文本框失去了你“。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js</title> 6 </head> 7  8 <body> 9 <input type="text" onfocus="alert('你获得了文本框')" onblur="alert('文本框失去了你')" />10 </body>11 </html>

  效果:

  注意:alert()里面要用单引号,因为外面已经使用过双引号,如果继续使用双引号的话,提示框不会弹出

 


5、制作倒计时

eg:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>倒计时</title> 6 <script language="JavaScript"> 7   var nextYear = new Date("1/1/2016");   //nextYear为2016年元旦那一天 8   var nowDay = new Date();  //nowDay为当前的时间 9   var seconds = nextYear.getTime() - nowDay.getTime(); //seconds是现在距离元旦的毫秒数10   var days = Math.floor(seconds/(1000*60*60*24));   11   if(days > 0) {12     document.write("距离元旦还有"+days+"天!");13   }14   else if(days == 0) document.write("今天就是元旦哦!祝你元旦快乐!");15   else document.write("元旦已经过了呀!");16 </script>   17 </head>18 19 <body>20 21 </body>22 </html>

  效果:(2015.12.8)

  重要知识点:

    (1)floor()函数:其功能是“向下取整”,或者说“向下舍入”,即取不大于x的最大整数(与“四舍五入”不同,下取整是直接取按照数轴上最接近要求的值左边的值,也就                                                  是不大于要求的值的最大的那个)。

    (2)getTime() 方法:getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。两个指定时间的getTime()方法相减,得到的是这两个指定时间相距的毫秒数。