精华内容
下载资源
问答
  • 网页简单计算器.zip

    2019-07-04 21:27:54
    网页简单计算器,包含计算器的基本功能,可以运行加减乘除计算。
  • 网页简单计算器.rar

    2019-05-27 12:41:31
    网页简单计算器,包含计算器的基本功能,可以运行加减乘除计算。
  • 介绍了网页计算器简单实现代码,有需要的朋友可以参考一下
  • 本文实例讲述了php编程实现简单的网页版计算器功能。...这是一个网页版的简单计算器</title> <meta http-equiv="Content-Type" content="text/html;chaset=utf-8" > </head> <?php
  • } </style> 计算器制作</title> </head> <body> 输入数字"/> + 输入数字" /> ()">=</button> <span id="jieguo"></span> 输入数字" /> - 输入数字" /> ()">=...
    <!doctype html>
    <html lang="en">
     <head>
    	<script>
    		/*何
    			*/
    			function jia(){
    
    			//加法
    			var a1input = document.getElementById("jisuan1");
    			var a1=a1input.value;
    
    			var a2input = document.getElementById("jisuan2");
    			var a2=a2input.value;
    
    			var a=Number(a1)+Number(a2);
    			var jieguo1 = document.getElementById("jieguo");
    			jieguo.innerHTML = a;
    			}
    		function jian(){
    				//减法
    			var a3input = document.getElementById("sjisuan3");
    			var a3=a3input.value;
    			var a4input = document.getElementById("jisuan4");
    			var a4=a4input.value;
    			var b=(a3-a4);
    			var jieguo1 = document.getElementById("jieguo1");
    			jieguo1.innerHTML = b;
    		}
    
    		function cheng(){
    			//乘法
    			var a5input = document.getElementById("jisuan5");
    			var a5=a5input.value;
    			var a6input = document.getElementById("jisuan6");
    			var a6=a6input.value;
    			var c=(a5*a6);
    			var jieguo1 = document.getElementById("jieguo2");
    			jieguo2.innerHTML =c;
    		}
    
    		function chu(){
    			//除法
    			var a7input = document.getElementById("jisuan7");
    			var a7=a7input.value;
    			var a8input = document.getElementById("jisuan8");
    			var a8=a8input.value;
    			var d=(a7/a8);
    			var jieguo1 = document.getElementById("jieguo3");
    			jieguo3.innerHTML =d;
    		}
    	</script>
    	<style>
    		#year_ipt{
    			width:200px;
    		}
    		#result_container{
    			font-size:30px;
    			color:#ff0000;
    		}
    	</style>
      <title>计算器制作</title>
     </head>
    	<body>
    		<input type="text" id="jisuan1" placeholder="输入数字"/>
    				+
    			 <input type="text" id="jisuan2" placeholder="输入数字" />
    				<button onclick="jia()">=</button>
    					<span id="jieguo"></span>
    
    
    					<br/>
    		 <input type="text" id="jisuan3" placeholder="输入数字"   />
    				-
    			 <input type="text" id="jisuan4" placeholder="输入数字" />
    				<button onclick="jian()">=</button>
    					<span id="jieguo1"></span>
    
    
    					<br/>
    		 <input type="text" id="jisuan5" placeholder="输入数字"   />
    				X
    			 <input type="text" id="jisuan6" placeholder="输入数字" />
    				<button onclick="cheng()">=</button>
    					<span id="jieguo2"></span>
    
    
    					<br/>
    		 <input type="text" id="jisuan7" placeholder="输入数字"   />
    					÷
    			 <input type="text" id="jisuan8" placeholder="输入数字" />
    				<button onclick="chu()">=</button>
    					<span id="jieguo3"></span>
    	 </body>
    </html>
    
    
    展开全文
  • 响应式的网页简单计算器,用了bootstrap的栅栏系统,也可以当作是bootstrap的排版初学
  • 简单网页计算器

    2019-04-02 21:31:58
    CSS文件 .content{ position: relative; margin: 100px auto; padding: 0px; border:1px solid rgb(221, 220, 220); width:500px; border-radius: 3px; top:-50px; } .display{ p...

    CSS文件

    .content{
        position: relative;
        margin: 100px auto;
        padding: 0px;
        border:1px solid rgb(221, 220, 220);
        width:500px;
        border-radius: 3px;
        top:-50px;
    }
    .display{
        position: relative;
        height:40px;
        margin-left: 10px;
        font-size: 25px;
    }
    #content{
        overflow: hidden;
    }
    .ul_style{
        position: relative;
        list-style-type: none;
    }
    .button{
        position: absolute;
        margin: 0px auto;
        width:480px;
        
    }
    .color_1{
        color:orangered;
        background-color: rgba(238, 237, 237, 0.377)  ;
    }
    table{
        width:500px;
        border:1px solid rgb(219, 219, 219);
    }
    td{
        width:120px;
        height:40px;
        border:1px solid rgb(219, 219, 219);
        text-align: center;
        font-size: 25px;
        font-family: "宋体"; 
    }
    td:hover{
        border: 1px solid rgb(175, 175, 175);
    }
    #content1{
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
    }
    #content1{
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
    }

    html文档

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div class="content">
            <div class="display">
              <p id = "content1"  style="border-bottom:1px solid rgb(219, 219, 219);">0</p>
            </div>
            <div class="display">
                    <p id = "content">0</p>
            </div>
        <div class="button">
            <table>
                <tr>
                    <td class="color_1" onclick="caculates('^')">^</td>
                    <td class="color_1" onclick="math('√')">√</td>
                    <td class="color_1" onclick="back()">del</td>
                    <td class="color_1" onclick="zero()">C</td>
                </tr>
                <tr>
                    <td class="color_1" onclick="math('sin')">sin</td>
                    <td class="color_1" onclick="math('cos')">cos</td>
                    <td class="color_1" onclick="math('tan')">tan</td>
                    <td class="color_1" onclick="Mzero()">+/-</td>
                </tr>
                <tr>
                    <td onclick="command('7')">7</td>
                    <td onclick="command('8')">8</td>
                    <td onclick="command('9')">9</td>
                    <td  class="color_1" onclick="caculates('÷')">÷</td>
                </tr>
                <tr>
                    <td onclick="command('4')">4</td>
                    <td onclick="command('5')">5</td>
                    <td onclick="command('6')">6</td>
                    <td  class="color_1" onclick="caculates('x')">x</td>
                </tr>
                <tr>
                    <td onclick="command('1')">1</td>
                    <td onclick="command('2')">2</td>
                    <td onclick="command('3')">3</td>
                    <td  class="color_1" onclick="caculates('-')">-</td>
                </tr>
                <tr>
                    <td onclick="command('0')">0</td>
                    <td onclick="dot()">.</td>
                    <td onclick="equal()">=</td>
                    <td  class="color_1" onclick="caculates('+')">+</td>
                </tr>
            </table>
        </div>        
        </div>
    </body>

    js文件

    var num1 = 0,result = 0;
    var show = "";
    var caculate = "";//储存运算符号
    var operate = 1;//控制运算符号
    var operate_t = 0;//防止在未输入数字出现运算符号
    var caculate_t = 0;//判断运算状态
    var quit = 1;//防止重复
    var caculate_time = 0;//运算此时
    var equals = -1;//判断是否进行运算获得答案
    var scan = 0;//输入判断
    function command(num){//输入函数
        if(scan==0)
        {
            equals = 0;
            var str = document.getElementById('content').innerHTML;
            str = (str!="0")?((operate==0)? str : ""):"";
            str = str + num; 
            document.getElementById('content').innerHTML=str;
            show = show=='0'? "" : show;
            show+=num;
            document.getElementById('content1').innerHTML = show;
            operate = 0;
            operate_t = 1;
            if(quit==2)
            {
                quit = 3;
            }
        }
        
    }
    function dot(){
        if(operate_t==1)
        {
            var str = document.getElementById('content').innerHTML;
            if(str.indexOf(".")==-1)
            {
                str +=".";
            }
            show = show.substr(0,show.length-str.length) + str;
            document.getElementById('content').innerHTML = str;
            document.getElementById('content1').innerHTML = show;
        }
    }
    function caculates(cacu){
        if((quit==1||quit==2)&&operate_t==1)//已输入两个数字后禁用运算符
        {
            scan = 0;
            caculate = cacu;
            if(caculate_time==0)//单次计算
            {
                if(caculate_t==0)
                {
                    var str = document.getElementById('content').innerHTML;
                    num1 = parseFloat(str);
                }
            }
            else if(caculate_time>0)//多次运算
            {
                var str = document.getElementById('content').innerHTML;
                num1 = (str==0)? result :(parseFloat(result.toString()+str));//
            }
            document.getElementById('content').innerHTML = "0";
            if(operate==0)//将运算符号显示在第一个显示面板中
            {
                show += cacu;
            }
            else if(operate==1)
            {
                show = show.substr(0,show.length-1) + cacu;
            }
            document.getElementById('content1').innerHTML = show;
            operate = 1;   
            quit = 2;//表明运算式中已存在运算符
            caculate_t=1;
        }
    }
    function zero(){//置零
        num1 = 0;
        result = 0;
        numshow = "0";
        show = "";
        caculate_time = 0;
        operate_t = 0;
        operate = 0;
        caculate_t = 0;
        equals = -1;
        document.getElementById("content").innerHTML = "0";
        document.getElementById('content1').innerHTML ="0";
    }
    function back(){//退格
        var str = document.getElementById('content').innerHTML;
        str = (str!="0")? str : "";
        show = show.substr(0,(show.length-str.length));
        str = str.substr(0,str.length-1);
        show = (str=="0")? show :(show+str);
        str = (str!="")? str : "0";
        show = (show!="")? show : "0";
        document.getElementById('content').innerHTML =str;
        document.getElementById('content1').innerHTML = show;
    }
    function equal()
    {
        if(caculate_t == 1&&quit==3)//如果处于运算状态,且输入了两个运算数字
        {
            var num2 = parseFloat(document.getElementById('content').innerHTML);
            console.log(num1);
            console.log(num2);
            switch (caculate){
                case "+":result = num1 + num2; break;
                case '-':result = num1 - num2; break;
                case 'x':result = num1 * num2; break;
                case '÷':
                    if(num2==0)//判断除数是否为0
                    {
                        document.getElementById('content1').innerHTML ="除数不能为0";
                        setTimeout(function(){zero()},1000);
                        return 0;
                    }
                    result = num1/num2;
                break;
                case '^':result = Math.pow(num1,num2); break;
            }
            show +="=" + result.toString();
            document.getElementById('content1').innerHTML =show;
            document.getElementById("content").innerHTML = "0";
            quit = 1;
            caculate_time+=1;
            caculate_t = 0;
            operate_t = 0;
            equals = 1;
            scan = 0;
        }
    }
    function math(cacu)//只需一个数字的运算
    {
        if(operate_t==1)
        {
            var num = 0;
            var result_1 = "";
            if(caculate_time==0)
            {
                var str = document.getElementById('content').innerHTML;
                num = parseFloat(str);
            }
            else
            {
                num = result;
                result_1 = result.toString();
            }
            result_1 = (result_1=="")? show : result_1;  
            switch(cacu){
                case"√":
                        if(num<0)
                        {
                            document.getElementById('content1').innerHTML ="被开方数不能小于0";
                            setTimeout(function(){zero()},1000);
                            return 0;
                        }
                        result = Math.sqrt(num);
                                       
                        document.getElementById('content1').innerHTML =result_1 + "√=" + result.toString();
                        break;
                case"sin":result = Math.sin(num);
                        document.getElementById('content1').innerHTML ="sin" + result_1 + "=" + result.toString();
                        break;
                case"cos":result = Math.cos(num);
                        document.getElementById('content1').innerHTML ="cos" + result_1 + "=" + result.toString();
                        break;
                case"tan":
                        if(Math.cos(num)==0)//判断输入数是否有定义
                        {
                            document.getElementById('content1').innerHTML ="错误!tan在此数无定义!";
                            setTimeout(function(){zero()},1000);
                            return 0;
                        }
                        result = Math.tan(num);
                        document.getElementById('content1').innerHTML ="tan" + result_1 + "=" + result.toString();
                        break;
            }
            document.getElementById("content").innerHTML = "0";
            caculate_time+=1;
            caculate_t = 0;
            quit = 1;
            scan = 0;
        }
    }
    function Mzero()//取相反数
    {
        if(equals==0)//判断是否有运算结果
        {
            var str =  document.getElementById('content').innerHTML;
            if(str.indexOf('-')==-1)
            {
                str = "-" + str;
            }
            else
            {
                str = str.substr(1,str.length);
            }
            document.getElementById('content').innerHTML = str;
            if(caculate_t==0)
            {
                show = (str.indexOf('-')==-1)?str :("("+str+")");
                document.getElementById('content1').innerHTML = show;
            }
            else
            {
                if(caculate_time==0)//是否进行多次运算
                {
                    show = (str.indexOf('-')==-1)? str:(show.substr(0,show.length-str.length+1)+"("+str+")");
                    document.getElementById('content1').innerHTML = show;
                }
            }
            scan = 1;
        }
        else if(equals==1)
        {
            scan = 1;
            var result_s = "";
            if(result.toString().indexOf('-')==-1)
            {
                result = parseFloat("-"+result.toString());
                result_s = "-" + result.toString();
            }
            else
            {
                result_s = result.toString().substr(1,result.toString().length);
                result = parseFloat(result_s);
                
                
            }
            document.getElementById('content1').innerHTML = result_s;
            show = result_s;
            caculate_t = 0;
            quit = 1;
            operate_t = 1;
        }
    }

     

    展开全文
  • web简单网页计算器

    2010-05-06 22:04:27
    学WEB时候作的简单计算器,用简单的web语言写的,算法也是比较简单,刚刚开始学时可以看看。
  • 简单网页计算器代码

    千次阅读 2017-11-13 15:42:29
    注:本人为初学者,欢迎各位大神指教 简单计算器实现效果: HTML代码counter.html<!DOCTYPE html> <html> 计算器 <link rel="stylesheet" type="text/css" href="css/co

    注:本人为初学者,欢迎各位大神指教
    简单计算器实现效果:
    这里写图片描述
    HTML代码counter.html

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>计算器</title>
            <link rel="stylesheet" type="text/css" href="css/counter.css" />
            <script type="text/javascript" src="js/counter.js"></script>
        </head>
    
        <body>
            <div class="counter">
                <div class="counter_top" >
                    <form>
                        <input type="text" id="top" value="" />
                    </form>
                </div>
                <div class="counter_down">
    
                    <form>
                        <input type="button" class="CE" value="清屏" onclick="cl(this.value)" />
                        <input type="button" class="CE" value="退格" onclick="cl(this.value)"/>
                        <div class="down_right" id="cou">
                            <input type="button" class="cou" value="÷" onclick="eva(this.value)"/>
                            <input type="button" class="cou" value="×" onclick="eva(this.value)"/>
                            <input type="button" class="cou" value="-" onclick="eva(this.value)"/>
                            <input type="button" class="cou" value="+" onclick="eva(this.value)"/>
                            <input type="button" class="cou" value="=" onclick="eva(this.value)"/>
                        </div>
                        <div id="down_num" >
                            <input type="button" class="num" value="7" onclick="show(this.value)"/>
                            <input type="button" class="num" value="8" onclick="show(this.value)"/>
                            <input type="button" class="num" value="9" onclick="show(this.value)"/>
                            <input type="button" class="num" value="4" onclick="show(this.value)" />
                            <input type="button" class="num" value="5" onclick="show(this.value)" />
                            <input type="button" class="num" value="6" onclick="show(this.value)"/>
                            <input type="button" class="num" value="1" onclick="show(this.value)"/>
                            <input type="button" class="num" value="2" onclick="show(this.value)"/>
                            <input type="button" class="num" value="3" onclick="show(this.value)"/>
                            <input type="button" class="num" value="0" onclick="show(this.value)"/>
                            <input type="button" class="num" value="." onclick="show(this.value)"/>
                            <input type="button" class="num" value="+/-" onclick="eva(this.value)"/>
                        </div>
    
                    </form>
    
                </div>
            </div>
        </body>
    
    </html>

    CSS代码counter.css

    .counter{
        background-color: #E0E0E0;
        width: 440px;
        height: 460px;
        padding: 20px;
    }
    
    .counter .counter_top{
        width: 440px;
        height: 53px;
        background-color: #fff;
    }
    
    .counter .counter_top input{
        width: 440px;
        height: 53px;
        border: 0px;
    }
    
    .counter_down .CE{
        width: 152.5px;
        height: 45px;
        margin: 15px 15px 0px 0px;
    }
    
    .counter_down .cou{
        width: 95px;
        height: 45px;
        margin-bottom: 15px;
    }
    
    .down_right{
        width: 95px;
        float: right;
        margin-top: 15px;
    }
    
    .counter_down .num{
        width: 95px;
        height: 45px;
        margin: 15px 16px 0px 0px;
    }
    

    js代码counter.js

    
    var a=0;
    var b;
    var c = 0;
    
    function show(value) {  
        document.getElementById("top").value +=value;       
    }
    
    function eva(value){
        c=parseFloat(document.getElementById("top").value);
    
        if (value=="=") {
            if(b=="+"){
                document.getElementById("top").value=(a+c);
            }else if(b=="-"){
                document.getElementById("top").value=(a-c);
            }else if(b=="×"){
                document.getElementById("top").value=(a*c);
            }else if(b=="÷"){
                if(c==0){
                    document.getElementById("top").value="分母不能为0";
                }else{
                    document.getElementById("top").value=(a/c);
                }   
            }
        }else{
            a=parseFloat(document.getElementById("top").value);
            document.getElementById("top").value="";
            b=value;
            if(b=="+/-"){
                a=-a;
                document.getElementById("top").value=a;
            }
        }   
    }
    
    function cl(value){
        if(value=="清屏"){
            document.getElementById("top").value="";
        }else{      document.getElementById("top").value=document.getElementById("top").value.substring(0,(document.getElementById("top").value.length-1))
        }   
    }
    
    
    展开全文
  • 一、对象 (一)节点:节点的层级关系,父子关系,兄弟关系 节点的类型: 标签节点,注释节点,文本节点 <html> <head> <meta charset="utf-8"> ... window.onload = fu...

    一、对象
    (一)节点:节点的层级关系,父子关系,兄弟关系
    节点的类型: 标签节点,注释节点,文本节点

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			window.onload = function() {
    								var nodes = document.all;
    				 				for (var i = 0; i < nodes.length; i++) {
    				 					alert(nodes[i].nodeName + "===" + nodes[i].nodeType);
    				 				}
    				 var chs = document.body.lastElementChild.childNodes;
    				 for (var i = 0; i <chs.length; i++) {
    				 	alert(chs[i].nodeName + "===" + chs[i].nodeType);
    				 }
    				var chs = document.body.firstElementChild.nextElementSibling.childNodes;
    				for (var i = 0; i <chs.length; i++) {
    					//alert(chs[i].nodeName + "===" + chs[i].nodeType);
    					if(chs[i].nodeType==1){
    							chs[i].style.color="red";
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<!-- 注释 -->
    		<div>
    			<h1>aabc</h1>
    		</div>
    		<div>
    			<h1>aabcsfsdfsdfsdf</h1>
    			<h1>aabcsfsdfsdfsdf</h1>
    		</div>
    	</body>
    </html>
    

    (二)自定义函数

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			/*
    			//构造函数
    			function Student(name,age){
    				//alert("构造函数调用了");
    				//alert(this);
    				this.name=name;
    				this.age=age;
    				this.eat=function(){
    					alert("吃饭");
    				}
    			}; 
    			
    			var stu=new Student("张三",23);
    			alert(stu.name);
    			alert(stu.age);
    			stu.eat();
    			
    			var stu2=new Student("李四",24);
    			alert(stu2.name);
    			alert(stu2.age);
    			stu2.eat();
    			*/
    		    var obj=new Object();
    			obj.name="战三";
    			obj.age=23;
    			obj.eat=function(){
    				alert("吃法");
    			}
    			alert(obj.name)
    			alert(obj.age);
    			obj.eat();
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    

    (三)二级联动

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    	</head>
    	<body>
    		<select id="sf" onchange="selecSF()">
    			<option value ="">--省份--</option>
    			<option value ="">陕西</option>
    			<option value ="">河南</option>
    		</select>
    		<select id="citys">
    			<option value ="">--请选择城市--</option>
    		</select>
    	</body>
    	
    	<script type="text/javascript">
    		/*
    		当我选择了省份后,后面的下拉框的内容要变成这个省份对应的城市
    		*/
    		//省市二级联动
    		//获取省份这个标签对象
    		var arr=[[],["请选择城市","西安","商洛","宝鸡","咸阳","铜川","渭南","汉中","安康","榆林","延安"],["请选择城市","商丘","郑州","驻马店","南阳","洛阳","开封"]];
    		var sheng=document.getElementById("sf");
    		var city=document.getElementById("citys");
    		
    		function selecSF(){
    			//清空旧数据
    			city.innerHTML="";
    			//alert("选择而来");
    			var index=sheng.selectedIndex;
    			//alert(index);
    			var citys=arr[index];
    			for(var i=0;i<citys.length;i++){
    				//取出这个省份对应的一维数组里面的城市,显示到第二个下来框
    				//创建option对象
    				var op=document.createElement("option");
    				//创建文本对象
    				var text=document.createTextNode(citys[i]);
    				//把文本对象放到option之间
    				op.appendChild(text);
    				//把option放到select之间
    				city.appendChild(op);
    			}
    		}
    	</script>
    </html>
    

    二、JSON
    (一)嵌套对象

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			var json = {
    				name: '张三',
    				age: '23',
    				data: {
    					sonname: 'sonson',
    					sonage: 100,
    				},
    				arr:[10,30,40],
    				method:function(){
    					alert("abc");
    				},
    				//ES6的语法
    				test(){
    					alert("test");
    				},
    				// test:function(){ 上面不简写
    				// 	 
    				// }
    			};
    			//取sonson
    			 var name=json.data.sonname;
    			 alert(name);
    			 var v=json.arr
    			 var num=v[2];
    			 alert(num);
    			 json.method();
    			 json.test();
    			//还有一种封装形式 数组的元素放的是JSON对象
    			var jsonArr=[{'name':'张三',age:23},{'name':'李四',age:24},{'name':'王五',age:25}];
    			var v=jsonArr[0].name;
    			alert(v);
    			for(index in jsonArr){
    				var obj=jsonArr[index];
    				for(key in obj){
    					alert(key+"==="+obj[key]);
    				}
    			}
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    

    (二)对象
    JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
    // 它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,
    // 采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得
    // JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			//如何定义JSON对象{'键名':值,键名2':值2};
    			var stuJSON={'name':'张三','age':23,'sex':true};
    			 //取数据:方式1:键找值
    			 var name=stuJSON.name;
    			 alert(name);
    			 alert(stuJSON.age);
    			 alert(stuJSON.sex);
    			 //方式2:
    			var name2=stuJSON['name'];
    			alert(name2)
    			alert("下面的")
    			//如何遍历JSON对象
    			for(key in stuJSON){
    				alert(stuJSON[key]);
    			}
    				alert("下面的数组")
    			//遍历数组 for in 
    			var arr=["aaa","bbbb","cccc","dddd"];
    			for(index in arr){
    				alert(arr[index]);
    			}
    			// String stu="{'name':'张三','age':23,'sex':true}"
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    

    (三)解析

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<table border="1" cellspacing="0" cellpadding="0" width="300px" height="200px">
    			<tr>
    				<td id="td1">Data</td>
    				<td>Data</td>
    				<td>Data</td>
    				<td>Data</td>
    				<td>Data</td>
    				<td>Data</td>
    			</tr>
    		</table>
    		<script type="text/javascript">
    			
    			// https://www.apiopen.top/weatherApi?city=%E6%88%90%E9%83%BD  天气预报的接口
    			// var str='{"name":"runoob", "alexa":10000, "site":"www.runoob.com"}'
    			// var str = '{"name":"runoob", "alexa":10000, "site":"www.runoob.com","dataJSON":{"num":100},"myJSON":{"hehe":"haha"}}'
    			// var obj = JSON.parse(str); //把JSON字符串解析成JSON对象
    			// alert(obj.myJSON.hehe);
    
    			// var jsonStr =
    			// 	'{"code":200,"message":"成功!","result":"因有人恶意刷接口,导致接口调用频繁,接口已经不能稳定运行,所以计划近期下线,积德吧朋友,如果长期如此,所有接口将面临关闭"}';
    			// 	
    			//JSON语法的严谨格式,不要格式化,紧凑风格,键值对不要有换行空格
    			var jsonStr =
    				'{"code":200,"msg":"成功!","data":{"yesterday":{"date":"18日星期二","high":"高温 27℃","fx":"无持续风向","low":"低温 20℃","fl":"\u003c![CDATA[\u003c3级]]\u003e","type":"阴"},"city":"成都","aqi":null,"forecast":[{"date":"19日星期三","high":"高温 27℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 20℃","fengxiang":"无持续风向","type":"多云"},{"date":"20日星期四","high":"高温 30℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 22℃","fengxiang":"无持续风向","type":"多云"},{"date":"21日星期五","high":"高温 29℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 21℃","fengxiang":"无持续风向","type":"阵雨"},{"date":"22日星期六","high":"高温 26℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 19℃","fengxiang":"无持续风向","type":"小雨"},{"date":"23日星期天","high":"高温 23℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 19℃","fengxiang":"无持续风向","type":"小雨"}],"ganmao":"各项气象条件适宜,无明显降温过程,发生感冒机率较低。","wendu":"26"}}'
    			var obj = JSON.parse(jsonStr); //JSON.parse()这个方法,在解析JSON字符串时,注意JSON字符串要原始格式(JSON字符串没有换行和空格)
    			//alert(obj);
    			var sonJSON=obj.data.yesterday;
    		     //sonJSON.date
    			// document.getElementById("td1").innerText=sonJSON.date;
    			var tds=document.getElementsByTagName("td");
    			var keyarr=new Array();
    			for(key in sonJSON){
    				keyarr.push(key);
    			}
    			//alert(keyarr);
    			// for(var i=0;i<tds.length;i++){
    			// 	tds[i].innerText=sonJSON.keyarr[i];
    			// }
    			
    			for(index in tds){
    				//alert(index);
    				tds[index].innerText=sonJSON[keyarr[index]];
    			}
    		</script>
    	</body>
    </html>
    

    (四)JSON对象和字符互换

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			// { "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
    			// 
    			// 我们使用 JSON.parse() 方法处理以上数据,将其转换为 JavaScript 对象:
    			//外面是单引号 注意:单引号括JSON对象,就变成JSON字符串
    			var str='{"name":"runoob", "alexa":10000, "site":"www.runoob.com"}'
    			var obj = JSON.parse(str); //把JSON字符串解析成JSON对象
    			alert(obj.name);
    			
    			var loginJSON={"username":"zhangsan","password":"123456"};
    			
    			var jsonString=JSON.stringify(loginJSON); //把JSON对象变成JSON字符串
    			alert(jsonString);
    			alert(typeof jsonString);
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    

    三、简单网页版计算器

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>计算器</title>
    		<style type="text/css">
    			input {
    				width: 336px;
    				height: 90px;
    				font-size: 50px;
    			}
    
    			input:disabled {
    				background: greenyellow;
    			}
    
    			td {
    				text-align: center;
    				font-size: 30px;
    				width: 100px;
    			}
    
    			td:hover {
    				background: yellowgreen;
    				cursor: pointer;
    			}
    			#div1{
    				border="0";
    				 cellspacing="0" ;
    				 cellpadding="0px" ;
    				 align="center" ;
    				 background-image:url(img/c2.jpg);
    			}
    			#div2{
    				margin-left:800px; 
    				width:350px;
    				height:100%;
    			}
    			#topTime{
    				height:60px;
    				 width:350px;
    				 background-color: greenyellow;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="div1" >
    			
    				<div id="div2" >
    					            <div id="topTime" onselectstart="return false" style=";" >
    					            	
    					            </div>
    								<div id="" style="border: 5px #FBF9FA solid;cellpadding=0px;">
    									<input type="text" name="" id="show" value="0" disabled="disabled" />
    								</div>
    								
    								<table border="1" cellpadding="0" height="450px" width="350px">
    									<tr>
    										<td id="clear">AC</td>
    										<td id="del">退格</td>
    										<td>%</td>
    										<td class="czf">÷</td>
    									</tr>
    									<tr>
    										<td class="num">7</td>
    										<td class="num">8</td>
    										<td class="num">9</td>
    										<td class="czf">×</td>
    									</tr>
    									<tr>
    										<td class="num">4</td>
    										<td class="num">5</td>
    										<td class="num">6</td>
    										<td class="czf">-</td>
    									</tr>
    									<tr>
    										<td class="num">1</td>
    										<td class="num">2</td>
    										<td class="num">3</td>
    										<td class="czf">+</td>
    									</tr>
    									<tr>
    										<td colspan="2" class="num">0</td>
    										<td class="num" id="point">.</td>
    										<td id="result">=</td>
    					
    									</tr>
    								</table>
    				</div>
    			
    		</div>
    		
    	</body>
    	<script type="text/javascript">
    		/* 思路:1.布局页面
    		 2.页面按键分为三类 数字和小数点归为一类,操作符归为一类, 退格 等号 清除 显示框 单独的 
    		 3.通过id 或者class 先获取出这些dom元素
    		 4.把我们点的数字显示上去,我们需要给所有数字设置点击事件
    		 */
    		//找到顶部时间栏
    var timeTop = document.getElementById("topTime");
    		showTime();
    var cycleTime = setInterval(showTime, 500);
    
    function showTime() {
    	var date=new Date();
    	var time=date.toLocaleDateString();
    	var time=date.toLocaleString(); //2019/6/14 上午10:17:31
    	timeTop.innerHTML = time;
    }
    		
    		var show_result = document.getElementById("show"); //获取显示框
    
    		var clear_btn = document.getElementById("clear"); //获取清除键
    
    		var del_btn = document.getElementById("del"); //获取退格键
    
    		var result_btn = document.getElementById("result"); //获取等号
    
    		var nums = document.getElementsByClassName("num"); //获取所有的数字键
    
    		var czfs = document.getElementsByClassName("czf"); //获取所有的操作符键
    		//定义三个变量,来存储第一个数字,第二个数字,运算符
    		var numValue1 = '';
    		var numValue2 = '';
    		var ysf = '';
    
    		//给数字置点击
    // 		for (var i = 0; i < nums.length; i++) {
    // 			nums[i].onclick = function() {
    // 				//取出标签之间的数字
    // 				numValue1 += this.innerText; //注意this代表的是你点击的那个元素对象
    // 				//alert(v);
    // 				show_result.value = numValue1;
    // 			}
    // 		}
    		
    		
    		for (var i = 0; i < nums.length; i++) {
    			nums[i].onclick = function() {
    				//取出标签之间的数字
    					
    				if(this.innerText=="."){
    								if(numValue1.indexOf('.') ==-1){
    									numValue1 += this.innerText; //注意this代表的是你点击的那个元素对象
    								}else if(numValue1.indexOf('.') ==2){
    									numValue1 += this.innerText; //注意this代表的是你点击的那个元素对象
    									numValue1 = numValue1.substring(0, numValue1.length - 1);
    								}
    				} else{
    					if(numValue1.charAt(0)=='.'){
    						numValue1='0' + numValue1;
    						
    					}
    					numValue1 += this.innerText; //注意this代表的是你点击的那个元素对象
    				}
    				show_result.value = numValue1;
    			}
    		}
    
    		//给操作符设置点击事件
    		for (var i = 0; i < czfs.length; i++) {
    			czfs[i].onclick = function() {
    				if(numValue2==''){
    					//当你点击操作符号时:我们把第一个数字,给第二个数字,然后把第一个数字清空,用来接收用户下次的输入
    					//保存操作符
    					numValue2 = numValue1;
    					numValue1 = '';
    					ysf = this.innerText;
    				}else{
    					//处理四则运算
    					//把上一次两个数运算的结果算出来,赋值给numValue2 再把numValue1清空,去接收下一次的输入
    					
    					resultFun();
    					ysf = this.innerText;
    				}
    				
    			}
    		}
    		//给等号设置监听,运算结果
    		result_btn.onclick = function() {
    			resultFun();
    		}
    
    		function resultFun() {
    			//把两个字符串数字,转成数字类型
    			var one = Number(numValue2);
    			var two = Number(numValue1);
    			var r = 0;
    			switch (ysf) {
    				case '+':
    					r = one + two;
    					break;
    				case '-':
    					r = one - two;
    					break;
    				case '×':
    					r = one * two;
    					break;
    				case '÷':
    					if (two == 0) {
    						clean();
    						r = 0;
    						alert("除数不能为0");
    					} else {
    						r = one / two;
    					}
    					break;
    			}
    			numValue2=r;
    			numValue1='';
    			show_result.value =numValue2;
    		}
    		//实现退格键
    		del_btn.onclick = function() {
    			tuige();
    		}
    		function tuige(){
    			if (numValue1.length > 1) {
    							numValue1 = numValue1.substring(0, numValue1.length - 1);
    							show_result.value = numValue1;
    						}
    			
    						//else{
    						// 	numValue1='';
    						// 	numValue2='';
    						// 	ysf='';
    						// 	show_result.value ='0';
    						// }
    		}
    		//实现清除键
    		var clean = function() {
    			numValue1 = '';
    			numValue2 = '';
    			ysf = '';
    			show_result.value = '0';
    		}
    		clear_btn.onclick = clean;
    	</script>
    </html>
    
    展开全文
  • JSP实现简单网页计算器

    千次阅读 2020-04-07 11:34:38
    一、构造一个简单计算器,能够进行“+、—、*、/”运算 (1)编写jsp页面,用户通过表单输入两个操作数和运算符,调用该页面自身处理该表单,通过调用SimpleCalculator类的实例实现运算逻辑,并显示运算结果。 ...
  • 简单网页计算器

    2016-02-21 13:24:47
    cal var str; function onclicknum(num) { str = document.getElementById("result_show"); str.value =str.value + num; ... function OnClickResult() ... str = document.getElem
  • </head> <body> <div class="container"> <form class="from-inline" action="001.php" method="post"> 网页计算器</h3> <div class="form-group"> <input class="form-control input-sm" type="text" name="n1"> ...
  • 主要介绍了使用jsp和javabean实现超简单网页计算器示例,需要的朋友可以参考下
  • PHP + HTML 完成网页简单计算器代码如下: ```php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head...
  • js实现简单计算器

    2020-10-23 07:03:58
    一个简洁的网页JS计算器,附详细代码释义。通过下边的效果演示就可以看到,这是一个挺小的js网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的...
  • 使用html编写简单网页计算器

    千次阅读 2016-10-08 23:32:03
    使用html制作简单网页计算器
  • 计算器 编写错误界面代码如下:  ; charset=GB18030"  pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ...
  • jQuery/javascript实现简单网页计算器 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery实现</title> 5 <script src="jquery.js"><...
  • 简单计算器 < / p > 第一个参数: < input type = "text" name = "num1" / > < br > < div style = "padding-left: 100px;" > < select name = "operator" > < option value = "1" > + < / option > ...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 294
精华内容 117
关键字:

网页简单计算器