小试牛刀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 xmlns="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 xmlns="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 xmlns="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 xmlns="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 xmlns="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()方法相减，得到的是这两个指定时间相距的毫秒数。