爷爷！！！,你关注的UP主终于更新了！！！
首先来简单解释一下什么是HTML,CSS,JS
1.HTML
HTML 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。
2.CSS
中文翻译为“层叠样式表”,主要功能是定义网页数据的编排、显示、格式化及特殊效果，它扩展了HTML的功能。
3.JS
JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。
计算器
下面是代码展示,一些需要注意的地方会进行注释供大家更好地理解
这部分是引用jQuery实现的代码
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>//网页标题
<script src="jquery-1.9.1.min.js"></script>//导入jQuery
<script>
function MCK(number) {
//jQuery("#num1")等效于原生代码中的document.getElementById("num2")
//这就是导入jQuery的优点之一
var inputnum1 = jQuery("#num1");
var inputnum2 = jQuery("#num2");
//直接调用val()
if(inputnum1.val()==""){
alert("第一个数字没输入呢!");
return false;
}
if(inputnum2.val()==""){
alert("第二个数字没输入呢!");
return false;
}
var total=0;
//加
if(number==1){
total=parseInt(inputnum1.val())+parseInt(inputnum2.val());
}
//减
else if(number==2){
total=parseInt(inputnum1.val())-parseInt(inputnum2.val());
}
//乘
else if(number==3){
total=parseInt(inputnum1.val())*parseInt(inputnum2.val());
}
//除
else if(number==4){
total=parseInt(inputnum1.val())/parseInt(inputnum2.val());
}
//直接调用html给result赋值
jQuery("#result").html( "<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>");
//清空
if(number==5){
if(confirm("确定清空吗?")){
//直接调用赋值
inputnum1.val("");
inputnum2.val("");
jQuery("#result").html("");
}
return false;
}
}
</script>
</head>
<body>
//用一个大div包住,给居中效果
<div style="text-align: center">
<h1>计算器</h1>
<!--输入框-->
<div>
第一个数字:<input id="num1" type="number" ><p></p>
第二个数字:<input id="num2" type="number"><p></p>
</div>
<!--五个按钮-->
<div>
<input type="button" value="相加" style="color: red" onclick="MCK(1)">
<input type="button" value="相减" style="color: purple" onclick="MCK(2)">
<input type="button" value="相乘" style="color: green" onclick="MCK(3)">
<input type="button" value="相除" style="color: yellow" onclick="MCK(4)">
<input type="button" value="清空" style="color: blue" onclick="MCK(5)">
<!--结果显示-->
<div id="result" style="font-size: 20px">
</div>
</div>
</div>
</body>
</html>
展示效果
下面是DOM原码实现
<html>
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<script>
function MCK(type) {
var inputnum1=document.getElementById("num1");
var inputnum2=document.getElementById("num2");
if(inputnum1.value==""){
alert("数字1没输入");
return false;
}
if(inputnum2.value==""){
alert("数字2没输入");
return false;
}
//加
if(type==1){
var total=parseInt(inputnum1.value)+parseInt(inputnum2.value);
document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>"
}
//减
if(type==2){
var total=parseInt(inputnum1.value)-parseInt(inputnum2.value);
document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>"
}
//乘
if(type==3){
var total=parseInt(inputnum1.value)*parseInt(inputnum2.value);
document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>"
}
//除
if(type==4){
var total=parseInt(inputnum1.value)/parseInt(inputnum2.value);
document.getElementById("result").innerHTML="<h1>计算结果:<strong style='color: red'>"+total+"</strong></h1>"
}
if(type==5){
if(confirm("确认清空吗?")){
inputnum1.value="";
inputnum2.value="";
document.getElementById("result").innerHTML="";
}
return false;
}
}
</script>
</head>
<body>
<div style="text-align: center">
<div style="margin-top: 100px;font-size: 30px">
<h1>计算器</h1>
<!-- 输入框 -->
数字1:<input id="num1" type="number"><p></p>
数字2:<input id="num2" type="number"><p></p>
</div>
<!-- 按钮-->
<div>
<input type="button" value="加" style="color: deeppink;font-size: 20px" onclick="MCK(1)">
<input type="button" value="减" style="color: blue;font-size: 20px" onclick="MCK(2)">
<input type="button" value="乘" style="color: red;font-size: 20px" onclick="MCK(3)">
<input type="button" value="除" style="color: purple;font-size: 20px" onclick="MCK(4)">
<input type="button" value="清" style="color: cyan;font-size: 20px" onclick="MCK(5)">
</div>
<!-- 结果显示-->
<div id="result" style="margin-top: 50px">
</div>
</div>
</body>
</html>
结果展示
从代码上看起来,很明显引入jQuery比原码实现更加的方便简捷.
实现效果都类似
加油，铁汁！！！