小试牛刀2:JavaScript基础题
2016-03-01 16:54
567 查看
JavaScript基础题
1、网页中有个字符串“我有一个梦想”,使用JavaScript获取该字符串的长度,同时输出字符串最后两个字。答案:
<!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" /> <title>js</title> </head> <body> <script type="text/javascript"> var str = "我有一个梦想"; len = str.length; st = str.substr(4,2); document.write("字符串长度为:" + len + "<br>" + "字符串最后两个字为:" +st); </script> </body> </html>
结果:
*还可以通过字符串长度.length属性来动态截取字符串*:
<script type="text/javascript"> var str = "我有一个梦想"; st = str.substr(str.length-2,2); document.write("字符串最后两个字为:" +st); </script>
结果:
2、制作成绩输出表,判断学生的成绩是否大于60,是的话在页面中输出“你及格了”,不是的话则输出“你不及格”。
<!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" /> <title>js</title> </head> <body> <script type="text/javascript"> function checktext() { var str = document.getElementById("text").value; if (str>60) alert("你及格了"); else alert("你不及格"); } </script> 请输入成绩:<input type="text" id="text" /> <input type="button" onclick="checktext()" value="提交" /> </body> </html>
结果:
3、输出九九乘法表
<!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" /> <title>js</title> </head> <body> <script type="text/javascript"> var arr = new Array(new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array()); //定义二维数组 var i , j ; //i表示九九乘法表里的行,j表示列 for(j = 1 ; j <= 9 ; j++) { for(i = 1 ; i <= 9 ; i++) { if(j<=i) arr[i-1][j-1] = i * j ; } } for(i = 1 ; i <= 9 ; i++) { for(j = 1 ; j <= 9 ; j++) { if(j<=i) document.write(" "+j+"*"+i+"="+arr[i-1][j-1]); } document.write("<br>"); } </script> </body> </html>
效果:
4、页面中一个文本输入框,当该文本框获得焦点时,弹出一个窗口提示用户“你获得了文本框”;当文本框失去焦点时,弹出一个窗口提示用户“文本框失去了你“。
<!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" /> <title>js</title> </head> <body> <input type="text" onfocus="alert('你获得了文本框')" onblur="alert('文本框失去了你')" /> </body> </html>
效果:
注意:alert()里面要用单引号,因为外面已经使用过双引号,如果继续使用双引号的话,提示框不会弹出
5、制作倒计时
eg:
<!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" /> <title>倒计时</title> <script language="JavaScript"> var nextYear = new Date("1/1/2016"); //nextYear为2016年元旦那一天 var nowDay = new Date(); //nowDay为当前的时间 var seconds = nextYear.getTime() - nowDay.getTime(); //seconds是现在距离元旦的毫秒数 var days = Math.floor(seconds/(1000*60*60*24)); if(days > 0) { document.write("距离元旦还有"+days+"天!"); } else if(days == 0) document.write("今天就是元旦哦!祝你元旦快乐!"); else document.write("元旦已经过了呀!"); </script> </head> <body> </body> </html>
效果:
(2015.12.8)
重要知识点:
(1)floor()函数:其功能是“向下取整”,或者说“向下舍入”,即取不大于x的最大整数(与“四舍五入”不同,下取整是直接取按照数轴上最接近要求的值左边的值,也就 是不大于要求的值的最大的那个)。
(2)getTime() 方法:getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。两个指定时间的getTime()方法相减,得到的是这两个指定时间相距的毫秒数。
相关文章推荐
- 常用JS技巧
- jqgrid实现行拖拽功能
- javaScript里的setTimeout()函数
- js deep copy 解析json
- Javascript函数既可以实例化成对象也可以是可用的函数
- JavaScript 闭包
- 浏览器JS文件缓存问题
- js中的encodeURIComponent()函数
- javascript数组与字符串之间转换
- org.json.JSONException: End of input at character 0 of解决
- gulp的使用介绍及技巧
- js继承的实现 extend
- js数组、正则表达式
- JavaScript知识归纳(3)
- js函数基础、字符串函数
- JSON和XML
- ajax跨域,json,jsonp
- js闭包的作用
- js POST提交跳转页面
- js运算符合和就是流程语句