用HTML，CSS，JS制作一个网页计算器

今天分享一个自己做的网页计算器，我个人感觉，虽然不精简，但是应该涉及到的东西都有了，所以分享出来，那我直接上代码了。

<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.com");  //这是正常js选取网页的语句
ifr.attr("src","https://www.baidu.com"); //这是用jquery选取的网页的语句
}

好了，今天就分享这么多，谢谢阅读！

用HTML，CSS，JS制作一个网页计算器相关推荐

html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
css选择器制作一个网页,CSS选择器和做网页思路
这节要做出以下效果的网页其实,做网页就像画画一样,要分为一个一个的区域制作当把基本的区域确定好后,我们才能开始制作网页拿我们今天要做的这种个网页为例,我们可以先把它分为三个区域分别为蓝绿黄区域 ...
中秋之美——html+css+js制作中秋网页
前言八月十五,秋已过半,是为中秋. "但愿人长久,千里共婵娟",中秋时节,气温已凉未寒,天高气爽,月朗中天,正是观赏月亮的最佳时令.古人把圆月视为团圆的象征,因此,又称八月十五为 ...
mysql设计高考倒计时_HTML/CSS+JS制作一个高考倒计时页面
2020-07-09更新修复倒计时归零后出现负数的bug 自动切换至下一年日期效果展示前言在B站上找视频学习的,勉强搞出来了,写下此篇文章作为笔记,也希望有更多感兴趣的人能够有所收获. (萌新 ...
用HTML+CSS+JS制作一个让女朋友无法抗拒的表白烟花网站
❤ 精彩专栏推荐
程序员也懂浪漫,表白代码,你值得拥有 (html+css+js制作一个结婚邀请函)
❤ 精彩专栏推荐
HTML+CSS+JS制作一个生日祝福网站(程序员专属情人节表白网站)
❤ 精彩专栏推荐
html+css+js制作一个超炫酷的雪花特效
❤ 精彩专栏推荐
HTML5期末大作业用HTML+CSS+JS制作婚庆网页【大学生网页作业代码】

用HTML，CSS，JS制作一个网页计算器

用HTML，CSS，JS制作一个网页计算器相关推荐

最新文章

热门文章