JavaScript基础题
1、让用户输入两个数字，然后输出相加的结果。
*prompt() 方法用于显示可提示用户进行输入的对话框。
语法：
prompt(text,defaultText)
说明：
如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
*parseInt() 函数可解析一个字符串，并返回一个整数。
语法：
parseInt(string, radix)
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript">
7 num1 = prompt("请输入第一个数字："+"");
8 num2 = prompt("请输入第二个数字："+"");
9 num = parseInt(num1)+parseInt(num2);
10 document.write("你输入的第一个数字是："+num1+"<br/>");
11 document.write("你输入的第二个数字是："+num2+"<br/>");
12 document.write("两个数相加的结果是："+num);
13 </script>
14 </head>
15 <body>
16
17 </body>
18 </html>
结果：
2、利用JavaScript的知识做一个简易计算器。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>简易计算器</title>
6 </head>
7 <body>
8 <form>
9 <input type="text" id="num1"> <!--第一个数字-->
10 <select id="check"> <!--运算的种类-->
11 <option value="add">+</option>
12 <option value="decrease">-</option>
13 <option value="multiply">*</option>
14 <option value="division">/</option>
15 </select>
16 <input type="text" id="num2"> <!--第二个数字-->
17 <input type="button" value="=" onclick="calculator()"> <!--等于号，即按钮-->
18 <input type="text" id="result"> <!--结果显示-->
19 </form>
20 <script type="text/javascript">
21 function calculator() {
22 var n1 = document.getElementById("num1").value; <!--获取第一个数值-->
23 var n2 = document.getElementById("num2").value; <!--获取第二个数值-->
24 var obj = document.getElementById("check").value; <!--获取运算的种类-->
25
26 var result = 0; <!--初始化变量-->
27
28 switch(obj) {
29 case "add":
30 result = parseInt(n1) + parseInt(n2);
31 break;
32 case "decrease":
33 result = parseInt(n1) - parseInt(n2);
34 break;
35 case "multiply":
36 result = parseInt(n1) * parseInt(n2);
37 break;
38 case "division":
39 if(parseInt(n2) != 0) {
40 result = parseInt(n1) / parseInt(n2);
41 }
42 else alert("除数不能为零！");
43 break;
44 }
45 document.getElementById("result").value=result;
46 }
47
48 </script>
49 </body>
50 </html>
效果：
3、确认表单必填项目的完整性。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>确认表单填写</title>
6 </head>
7 <body>
8 <form>
9 用户名：<br/>
10 <input type="text" id="Name"><br/>
11 密码：<br/>
12 <input type="text" id="Key"><br/>
13 确认密码：<br/>
14 <input type="text" id="reKey"><br/>
15 <input type="button" value="提交" onclick="check_submit()">
16 </form>
17 <script type="text/javascript">
18 function check_submit() {
19 var name = document.getElementById("Name").value; <!--获取用户名-->
20 var key = document.getElementById("Key").value; <!--获取密码-->
21 var rekey = document.getElementById("reKey").value; <!--获取确认的密码-->
22
23 if(name=="") alert("请输入用户名！");
24 if(key=="") alert("请输入密码！");
25 if(rekey=="") alert("请输入确认密码！");
26 if(rekey != key) alert("两次输入的密码应该一致，请重新输入！")
27 }
28 </script>
29 </body>
30 </html>
结果：
*document.getElementById可以简写为$*
4、创建更人性化的表单，要求：
（1）鼠标指针进入文本框时自动获得焦点并选择。
（2）鼠标左键单击“用户名”文本框时自动清空内容。
（3）“用户名”文本框失去焦点时判断内容是否为空。
（4）提交后将“提交”按钮设置为不可用。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript">
7 function check_submit() { //判断内容是否为空
8 var name = document.getElementById("Name").value; //获取用户名
9 var key = document.getElementById("Key").value; //获取密码
10 var rekey = document.getElementById("reKey").value; //获取确认的密码
11 if(name=="") alert("请输入用户名！");
12 if(key=="") alert("请输入密码！");
13 if(rekey=="") alert("请输入确认密码！");
14 if(rekey != key) alert("两次输入的密码应该一致，请重新输入！")
15 }
16
17 function mover() { //鼠标指针进入文本框时自动获得焦点并选择
18 event.srcElement.focus();
19 event.srcElement.select();
20 }
21
22 function mclick() { //鼠标左键单击“用户名”文本框时自动清空内容
23 if(event.srcElement.value=="请输入用户名") event.srcElement.value = ""; //event.srcElement：表示的当前的这个事件源
24 }
25
26 function mblur() {
27 if(event.srcElement.value=="") event.srcElement.value = "请输入用户名"; //“用户名”文本框失去焦点时判断内容是否为空
28 }
29 </script>
30 </head>
31 <body>
32 <form>
33 用户名：<br/>
34 <input type="text" id="Name" value="请输入用户名" onclick="mclick()" onblur="mblur()" onmouseover="mover()"><br/>
35 密码：<br/>
36 <input type="password" id="Key" onmouseover="mover()"><br/>
37 确认密码：<br/>
38 <input type="password" id="reKey" onmouseover="mover()"><br/>
39 <input type="button" value="提交" onclick="check_submit()">
40 </form>
41 </body>
42 </html>
效果：
5、使用递归算法求自然数的阶乘。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>自然数阶乘</title>
6 <script type="text/javascript">
7 function text() {
8 var x = document.getElementById("num").value;
9 function jieCheng(n) {
10 if(n>0) return (jieCheng(n-1)*n);
11 return 1;
12 }
13 document.getElementById("result").value = jieCheng(x);
14 }
15 </script>
16 </head>
17 <body>
18 请输入正整数n：
19 <input type="text" id="num">
20 <input type="text" id="result">
21 <input type="button" value="结果" onclick="text()">
22 </body>
23 </html>
结果：
6、由初速度和仰角求炮弹的射程。
isNaN()的意思是非数字，里面传入数字的话就返回false,传入的不是数字的话就返回true，【空的话也是返回true,一个点也是返回true,点个数字组合返回的是false,说明是数字】
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>由初速度和仰角求炮弹的射程</title>
6 <script type="text/javascript">
7 function cal() {
8 var spe = document.getElementById("speed").value;
9 var ang = document.getElementById("angle").value;
10 var g = 10; //重力加速度
11
12 //判断输入的信息是否完整
13 if(spe==""||ang=="") alert("输入的信息不完整，请输入未完成的信息！");
14
15 //判断输入的信息是否为数值
16 if(isNaN(spe)||isNaN(ang)) alert("您输入的是非数字，请重新输入！");
17
18 //计算飞行时间
19 var tim = Math.sin(ang/180*Math.PI)*spe/g*2;
20
21 //计算炮弹的射程
22 var dist = tim*Math.cos(ang/180*Math.PI)*spe;
23
24 //将结果以文本框的数值输出
25 document.getElementById("time").value = tim.toFixed(2);
26 document.getElementById("distance").value = dist.toFixed(2);
27 }
28 </script>
29 </head>
30 <body>
31 <table>
32 <tr>
33 <td>炮弹的初速度：</td>
34 <td><input type="text" id="speed">(米/秒)</td>
35 </tr>
36 <tr>
37 <td>炮弹的发射仰角：</td>
38 <td><input type="text" id="angle">（度）</td>
39 </tr>
40 <tr>
41 <td><input type="button" value="计算" onclick="cal()"></td>
42 <td></td>
43 </tr>
44 <tr>
45 <td>炮弹的飞行时间：</td>
46 <td><input type="text" id="time">（秒）</td>
47 </tr>
48 <tr>
49 <td>炮弹的射程：</td>
50 <td><input type="text" id="distance">（米）</td>
51 </tr>
52 </table>
53 </body>
54 </html>
效果：
7、写一个用Math.random取随机图片的程序。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>取随机图片</title>
6 <script type="text/javascript">
7 var photoes = new Array(); //新建数组
8 //将图片放入数组
9 photoes[0] = "<img src="../image/1.png">";
10 photoes[1] = "<img src="../image/2.png">";
11 photoes[2] = "<img src="../image/3.png">";
12 photoes[3] = "<img src="../image/5.png">";
13 photoes[4] = "<img src="../image/8.png">";
14
15 var num = Math.floor(Math.random() * photoes.length); //获取随机数
16 document.write(photoes[num]);
17 </script>
18 </head>
19 <body>
20 </body>
21 </html>
效果：每刷新一次都会出现随机的图片。
*Math.floor()对数值型变量去掉小数点取整。
8、