一、简易计算器
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:vs JQ
作者: 龚紫康
撰写时间:2021年5月8日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
项目功能:进行简易计算,项目组成由<input>的number输入框,<select> 下拉框,两个text文本框和一个button按钮组成。
初始效果:
|
图1
<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是数字大小、文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等,
<input type=“number”>可以显示出一个上下箭头从而选择数字大小
结果如图:
|
图2
<select>标签Select 对象代表 HTML 表单中的一个下拉列表。在 HTML 表单中,<select> 标签每出现一次,一个 Select 对象就会被创建。通过option设置下拉框内容。代码如下:
二、Js代码讲解
代码如下:
$("#btn").click(function () {
var num1 = $("#num1").val();
// //console.log(num1);
var num2 = $("#num2").val();
// //console.log(num2);
var zf = $("#ZhiFu").val();
if (zf == 0) {
$("#num3").val(parseInt(num1) + parseInt(num2));
}else
if (zf == 1) {
$("#num3").val(parseInt(num1) - parseInt(num2));
}else
if (zf == 2) {
$("#num3").val(parseInt(num1) * parseInt(num2));
}else{
$("#num3").val(parseInt(num1) / parseInt(num2));
if (num2 == 0) {
alert("除数不为0");
return;
}
}
})
First,给计算button按钮绑定一个click()点击事件,使用jq方法获取到两个text文本输入框的值,我们可以在控制台输出num1、num2检查是否获取到值,
效果如图:
结果如图:
申明一个变量zf表示下拉框的value值;利用if……else if……else语句执行多个代码:$("#num3").val(parseInt(num1) + parseInt(num2));当然,还能使用switch语句。
$("#num3").val(parseInt(num1) + parseInt(num2));中的parseInt()函数可解析一个字符串,并返回一个整数。当参数 radix 的值为 0,或没有设置该参数时,parseInt () 会根据 string 来判断数字的基数。
举例,如果 string 以 "0x" 开头, parseInt () 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt () 的 一个 实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头,parseInt () 将把它解析为十进制的整数。
最后,当算数符为除号时,我们知道除数不能为0,所以我们要给符号为“/”时加上一个判断代码如下:
$("#num3").val(parseInt(num1) / parseInt(num2));
if (num2 == 0) {
alert("除数不为0");
return;
}