小试牛刀3之JavaScript基础题

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、

时间: 2024-11-03 01:25:47

小试牛刀3之JavaScript基础题的相关文章

JavaScript基础题库

选择题: 填空题: 问答题: 1.什么是JavaScript?(这是基本题,对很多程序员来说也是送分题!) JavaScript是客户端和服务器端脚本语言,可以插入到HTML页面中,并且是目前较热门的Web开发语言.同时,JavaScript也是面向对象编程语言. 类似的基本题目还包括:JavaScript都有哪些类型?JavaScript是谁发明的?...... 2.列举Java和JavaScript之间的区别? Java是一门十分完整.成熟的编程语言.相比之下,JavaScript是一个可以

一步步学习javascript基础篇(3):Object、Function等引用类型

我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂数据类型(即引用数据类型) Object类型 我们用的最多的引用类型就属object类型了,一般用来存储和传输数据是再好不过的.然,它的两种创建方式我们是否了解呢? 1.通过构造函数来创建 如: var obj = new Object(); 在js中的引用类型有个非常灵活的用法,可以动态的附加属性和赋值.

【javascript基础】8、闭包

原文:[javascript基础]8.闭包 前言 函数和作用域啥的我们前面已经了解了,现在就要学习闭包了,这是一个挺晦涩的知识点,初学者可能会感觉不好理解,但是高手都不不以为然了,高手就给我提点意见吧,我和新手一起来学习什么是闭包. 例子 先不说定义,先看一个题,看看大家能得出正确的结果不, function test(){ var arr = []; for(var i = 0;i<10;i++){ arr[i] = function(){ return i; } } return arr;

javascript基础-对象

原理 万物皆为对象.假设将'莫德'(我)看成对象.莫德的属性有名字,性别,年龄等. 莫德的行为有吃饭,走路,睡觉等.莫德与他人的往来即对象间的交互.对象对应世界的一个实体.类,即管理对象的分类.如果莫德是具体的对象.男人即类.人即接口. 构建方式 单例对象:JSON 普通对象: (function(w,M){ M.InviteFriends = function(){ //构造函数 function InviteFriends(){}; //原型 InviteFriends.prototype

javascript基础修炼——一道十面埋伏的原型链面试题

javascript基础修炼--一道十面埋伏的原型链面试题 在基础面前,一切技巧都是浮云. 题目是这样的 要求写出控制台的输出. function Parent() { this.a = 1; this.b = [1, 2, this.a]; this.c = { demo: 5 }; this.show = function () { console.log(this.a , this.b , this.c.demo ); } } function Child() { this.a = 2;

javascript基础修炼(2)——What‘s this(上)

javascript基础修炼(2)--What's this(上) 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. [TOC] 一.this是什么 this是javascript关键字之一,是javascript能够实现面向对象编程的核心概念.用得好能让代码优雅高端,风骚飘逸,用不好也绝对是坑人坑己利器.我们常常会在一些资料中看到对this的描述是: this是一个特殊的与Execution Contexts相关的对象,用于指明当前代码执行时的Execution

javascript入门书籍推荐《javascript基础教程》

前段时间看javascript高级教程的时候,发现很多基础的javascript概念,自己不懂. 网上搜了一下,看到大家对<javascript基础教程(第8版)>评价不错,买了一本. 作者: (美)Tom Negrino Dori Smith 译者: 陈剑瓯 柳靖 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 翻开看了后,受益匪浅,决定将这本书推荐给javascript的入门童鞋. 这本书的读者,要有一定的HTML基础,因为javascript基本都是对Dom的操作,所以,有一定的HT

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

Javascript.01 -- Javascript基础

Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司   研发出世界上第一款浏览器. 95年 sun公司   java语言诞生 网景公司和sun合作. Java+script   ===> javascript 1.2 W3c规范 ?结构标准        html ?表现标准   css ?行为标准      js 1.3 JavaScript和ECMAScript的关系 ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协