用HTML,CSS,JS实现简单的计算器网页

爷爷!!!你关注的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( "

计算结果:"+total+"

"
); //清空 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>

展示效果
用HTML,CSS,JS实现简单的计算器网页_第1张图片

下面是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="

计算结果:"+total+"

"
} //减 if(type==2){ var total=parseInt(inputnum1.value)-parseInt(inputnum2.value); document.getElementById("result").innerHTML="

计算结果:"+total+"

"
} //乘 if(type==3){ var total=parseInt(inputnum1.value)*parseInt(inputnum2.value); document.getElementById("result").innerHTML="

计算结果:"+total+"

"
} //除 if(type==4){ var total=parseInt(inputnum1.value)/parseInt(inputnum2.value); document.getElementById("result").innerHTML="

计算结果:"+total+"

"
} 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>

结果展示
用HTML,CSS,JS实现简单的计算器网页_第2张图片

从代码上看起来,很明显引入jQuery比原码实现更加的方便简捷.
实现效果都类似

加油,铁汁!!!

你可能感兴趣的:(笔记,js,html,css,javascript)