今天分享一个自己做的网页计算器，我个人感觉，虽然不精简，但是应该涉及到的东西都有了，所以分享出来，那我直接上代码了。
<html>
<head>
<meta charset="utf-8">
<title>我的计算器</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
function myck(type) {
var inputNumber1 =jQuery("#number1");
var inputNumber2 = jQuery("#number2");
var inputEnd = jQuery("#result");
if(type==1){
if(inputNumber1.val().trim()==""){
alert("输入不能为空");
return false;
}
if(inputNumber2.val().trim()==""){
alert("输入不能为空");
return false;
}
var end = parseInt(inputNumber1.val()) + parseInt(inputNumber2.val());
inputEnd.html("<p style='background-color: aqua'>最终结果：<strong style='color:red'>"+end+"</strong></p>");
}
if(type==2){
if(inputNumber1.val().trim()==""){
alert("输入不能为空");
return false;
}
if(inputNumber2.val().trim()==""){
alert("输入不能为空");
return false;
}
var end = parseInt(inputNumber1.val()) - parseInt(inputNumber2.val());
inputEnd.html("<p style='background-color: aqua'>最终结果：<strong style='color:red'>"+end+"</strong></p>");
}
if(type==3){
if(inputNumber1.val().trim()==""){
alert("输入不能为空");
return false;
}
if(inputNumber2.val().trim()==""){
alert("输入不能为空");
return false;
}
var end = parseInt(inputNumber1.val()) * parseInt(inputNumber2.val());
inputEnd.html("<p style='background-color: aqua'>最终结果：<strong style='color:red'>"+end+"</strong></p>");
}
if(type==4){
if(confirm("是否确认清空")){
inputNumber1.val("");
inputNumber2.val("");
alert("清空完毕");
}
inputEnd.html("");
}
}
</script>
</head>
<body>
<div style="text-align: center;margin-top: 100px">
<h1><strong>计算器</strong></h1><p></p>
<div>
数字1：<input id="number1" name="num1" type="number"><p></p>
数字1：<input id="number2" name="num2" type="number"><p></p>
</div>
<div>
<input type="button" value="相加" onclick="myck(1)">
<input type="button" value="相减" onclick="myck(2)">
<input type="button" value="相乘" onclick="myck(3)">
<input type="button" value="清空" onclick="myck(4)">
</div>
<div id="result">
</div>
</div>
</body>
</html>
这是展示成果，接下来我再来详细讲讲。
先来说说 body 部分
<body>
<div style="text-align: center;margin-top: 100px"> //这行是让<div>包裹的这部分格式都在文本中间，并且距离顶部100像素
<h1><strong>计算器</strong></h1><p></p> //这个就是标题了 <strong>表示加粗
<div> //这个区域是我嵌套了<div>,因为我感觉可以缩小控制范围，有利于调整 下面两行就是给了数字文本框 ，并且定义了id，name，type，这里id是很重要的，他是通过js获取内容的参数 name 是电脑所需要的参数 ，type则是表示输入的类型
数字1：<input id="number1" name="num1" type="number"><p></p>
数字1：<input id="number2" name="num2" type="number"><p></p>
</div>
<div> //这部分则是四个按钮框 后面的onlick参数是给每个文本框一个参数，以便后面js能够通过这个参数得到按钮的内容
<input type="button" value="相加" onclick="myck(1)">
<input type="button" value="相减" onclick="myck(2)">
<input type="button" value="相乘" onclick="myck(3)">
<input type="button" value="清空" onclick="myck(4)">
</div>
<div id="result"> // 而这部分只是给了一个空白部分，没有给任何内容，但是请注意，我们给了一个id参数，这个参数接下来通过js获取，然后可以给这部分赋于内容的。
</div>
</div>
</body>
再来说说head部分
<head>
<meta charset="utf-8"> //这个是一个将来为部署项目的参数，后面我在具体分享
<title>我的计算器</title> //这个是网页标题
<script src="jquery-1.9.1.min.js"></script> //这里引入一个JQuery，这个东西很重要，我稍后会讲解。
<script> //这个元素表示的区域就是js实现区域了
function myck(type) { //设置一个可以接受按钮参数的方法
var inputNumber1 =jQuery("#number1"); // 这两行是通过id获取到输入框的内容
var inputNumber2 = jQuery("#number2");
var inputEnd = jQuery("#result"); //这个则是拿到下面那个空白部分的id ，方便赋予内容
if(type==1){ //以下这四个if是分别接受四个按钮的操作
if(inputNumber1.val().trim()==""){ //如果数字1处的输入为空
alert("输入不能为空"); //弹出页面 输入不能为空
return false;
}
if(inputNumber2.val().trim()==""){
alert("输入不能为空");
return false;
}
var end = parseInt(inputNumber1.val()) + parseInt(inputNumber2.val()); //如果两个数字都不为空，则返回他们对应的计算类型，注意这里需要用parseInt来转换类型
inputEnd.html("<p style='background-color: aqua'>最终结果：<strong style='color:red'>"+end+"</strong></p>"); //而这个就是通过空白部分的id来输入结果了 这里我设置了两个参数，分别是背景颜色 style='background-color: aqua 字体颜色 style='color:red'
}
if(type==2){
if(inputNumber1.val().trim()==""){
alert("输入不能为空");
return false;
}
if(inputNumber2.val().trim()==""){
alert("输入不能为空");
return false;
}
var end = parseInt(inputNumber1.val()) - parseInt(inputNumber2.val());
inputEnd.html("<p style='background-color: aqua'>最终结果：<strong style='color:red'>"+end+"</strong></p>");
}
if(type==3){
if(inputNumber1.val().trim()==""){
alert("输入不能为空");
return false;
}
if(inputNumber2.val().trim()==""){
alert("输入不能为空");
return false;
}
var end = parseInt(inputNumber1.val()) * parseInt(inputNumber2.val());
inputEnd.html("<p style='background-color: aqua'>最终结果：<strong style='color:red'>"+end+"</strong></p>");
}
if(type==4){
if(confirm("是否确认清空")){ //这里强调一下，弹出是否确认框的时候，用confirm方法
inputNumber1.val("");
inputNumber2.val("");
alert("清空完毕");
}
inputEnd.html(""); //在清空了数据之后，应该也将下面的结果框清空
}
}
</script>
</head>
这里介绍一下JQuery
使用JQuery步骤：
1、引入JQuery
<script src="jquery-1.9.1.min.js"></script> //注意，引入jQuery一定要在head中执行，并且要保证jquery与项目在同一目录下才能成功引入
2，使用jQuery
这里就举几个例子让大家感受一下它的便利
var inputName = document.getElementById("userName"); //doucument表示这个页面，正常的js拿到参数id，必须通过页面本身去访问 ，userName就表示所要访问的目标id
var inputName = jQuery("#userName");//而用jquery只是简单的加上# ，就可以拿到目标id
var ifr = document.getElementById("ifr");//这里实现拿到一个网页的id
var ifr = jQuery("#ifr");
if(type == 1){ //这里只是给大家展示一个if条件，表示选取网页功能
ifr.setAttribute("src","https://www.baidu"); //这是正常js选取网页的语句
ifr.attr("src","https://www.baidu"); //这是用jquery选取的网页的语句
}
好了，今天就分享这么多，谢谢阅读！
更多推荐
用HTML,CSS,JS制作一个网页计算器
发布评论