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()方法相减,得到的是这两个指定时间相距的毫秒数。