精华内容
下载资源
问答
  • 网页计算器html代码
    2021-06-10 17:17:29

    #box{width: 295px; margin: 0 auto; text-align: justify; border: 1px solid #ddd; padding: 15px;}

    .d_num{display: inline-block; margin: 10px; width: 33px; height: 30px; border: 1px solid #ddd; text-align: center; line-height: 30px; cursor: pointer;}

    .sum{margin: 0 10px 10px; line-height: 30px; font-size: 20px;}

    #sum{width: 205px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}

    #process{width: 255px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}

    SUM:

    1

    2

    3

    C

    4

    5

    6

    *

    /

    7

    8

    9

    +

    -

    0

    00

    .

    %

    =

    var $box = document.getElementById('box');

    var $sum = document.getElementById('sum');

    var $process = document.getElementById('process');

    var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false;

    $box.onclick = function(e){

    var event = window.event || e;

    var ele = event.srcElement || event.target;

    var _className = ele.className;

    if(_className == 'd_num'){

    var num = ele.getAttribute('data-num');//点击的按钮对应的值

    var NotNum = isNaN(num);

    if(!NotNum || num == '.'){ //点击了数字

    if(!statu){ //还没点击过符号

    if(num1 == '0'){

    num1 = '';

    }

    num1 += num;

    process = num1;

    }else{ //已经点击过符号

    if(num2 == '0'){

    num2 = '';

    }

    num2 += num;

    process = num1 + temp + num2;

    }

    $process.value = process;

    }

    else{ //点击了符号

    if(num1 == ''){//非法操作

    return false;

    }

    if(num == 'C'){//归零

    num1 = '';

    num2 = '';

    process = '';

    temp = '';

    sum = '';

    $process.value = '0';

    $sum.value = '0';

    statu = false;

    return false;

    }

    if(num == '

    if(sum != ''){

    return false;

    }

    if(num2 == ''){

    ; num1 = num1.substring(0,num1.length-1);

    if(num1 == ''){

    num1 = '0';

    }

    process = num1;

    $process.value = process;

    }else{

    num2 = num2.substring(0,num2.length-1);

    if(num2 == ''){

    num2 = '0';

    }

    process = num1 + temp + num2;

    $process.value = process;

    }

    return false;

    }

    if(num2 != ''){//a&b

    if(num == '='){//元操作到此结束

    $process.value = process;

    }else{

    $process.value = process + num;

    }

    switch(temp){//元操作继续

    case '+' : sum = parseFloat(num1) + parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

    case '-' : sum = parseFloat(num1) - parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

    case '*' : sum = parseFloat(num1) * parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

    case '/' : sum = parseFloat(num1) / parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

    case '%' : sum = parseFloat(num1) % parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

    }

    }else{//a&?

    if(num == '='){

    return false;

    }

    $process.value = process + num;

    process = '';

    }

    if(num == '='){

    sum = '';

    statu = false;

    return false;

    }

    temp = num;//记录操作符

    statu = true;//已经触发操作状态

    }

    }

    };

    更多相关内容
  • 这是一款蓝色简洁的网页计算器js代码,可以进行一些基本的加减乘除运算。
  • 一款简单好看的html5网页计算器代码,精美的html5 css3计算器样式特效。 js代码  [removed]  function s(v) { document.getElementById('res').value = v }  function a(v) { document.getElementById('res...
  • 网页版在线计算器,简洁实用,支持加减乘除运算,在电脑无计算器时非常实用。
  • 简单网页计算器代码

    万次阅读 2017-11-13 15:42:29
    注:本人为初学者,欢迎各位大神指教 简单计算器实现效果: HTML代码counter.html 计算器

    注:本人为初学者,欢迎各位大神指教
    在线试一试
    简单计算器实现效果:
    这里写图片描述
    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网页计算器代码

    2017-07-04 15:01:00
    计算器网页效果显示:点击这里! <script> function show(){ var date = new Date(); //日期对象 var now = ""; now = date.getFullYear()+"年"; //读英文即可了 now = now + (date.getMonth()+...

    计算器网页效果显示:点击这里!



    <script> 
    function show(){ 
    var date = new Date(); //日期对象 
    var now = ""; 
    now = date.getFullYear()+"年"; //读英文即可了 
    now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1假设想取当前月+1就能够了 
    now = now + date.getDate()+"日"; 
    now = now + date.getHours()+"时"; 
    now = now + date.getMinutes()+"分"; 
    now = now + date.getSeconds()+"秒"; 
    document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串 
    setTimeout("show()",1000); //设置过1000毫秒就是1秒,调用show方法 

    </script>


    <!DOCTYPE html> 
    <html> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head> 
    <title>Calculator</title> 


    <!--将按键内容以字符串形式存储在文字框中当button为“=”时。调用eval方法计算结果然后将结果输出文字框中--> 
    <script type="text/javascript"> 
    var numresult; 
    var str; 
    function onclicknum(nums) { 
    str = document.getElementById("nummessege"); 
    str.value = str.value + nums; 

    function onclickclear() { 
    str = document.getElementById("nummessege"); 
    str.value = ""; 

    function onclickresult() { 
    str = document.getElementById("nummessege"); 
    numresult = eval(str.value); 
    str.value = numresult; 

    </script> 


    <style type="text/css">
    img{
      position:absolute;
      left:1100px;
      top:100px;
      }
    </style>
    </head> 
    <body>   <!用来显示时间>
    <h2 align=right><font color="#cc0033">
    <body οnlοad="show()">   <!-- 网页载入时调用一次 以后就自己主动调用了--> 
    <div id="nowDiv"></div> 
    </font></h2>
    </body>
    <body bgcolor="#9900ff" > 
    <a  href="../index.html"><img border="0" src="./image/4.jpg" alt="主页面" title="返回主页面"></a>


    <font color="red" size="6"><center>网络人VS灰鸽子工作室</center></font>
    <p></p>
    <!--定义按键表格,每一个按键相应一个事件触发--> 
    <table border="1" align="center" bgColor="#6633CC" 
    style="height: 350px; width: 270px"> 
    <tr> 
    <td colspan="4"> 
    <input type="text" id="nummessege" 
    style="height: 90px; width: 350px; font-size: 50px" /> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <input type="button" value="1" id="1" οnclick="onclicknum(1)" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="2" id="2" οnclick="onclicknum(2)" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="3" id="3" οnclick="onclicknum(3)" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="+" id="add" οnclick="onclicknum('+')" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <input type="button" value="4" id="4" οnclick="onclicknum(4)" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="5" id="5" οnclick="onclicknum(5)" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="6" id="6" οnclick="onclicknum(6)" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="-" id="sub" οnclick="onclicknum('-')" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <input type="button" value="7" id="7" οnclick="onclicknum(7)" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="8" id="8" οnclick="onclicknum(8)" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="9" id="9" οnclick="onclicknum(9)" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="*" id="mul" οnclick="onclicknum('*')" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    <input type="button" value="0" id="0" οnclick="onclicknum(0)" 
    style="height: 70px; width: 190px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="." id="point" οnclick="onclicknum('.')" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    <td> 
    <input type="button" value="/" id="division" 
    οnclick="onclicknum('/')" 
    style="height: 70px; width: 90px; font-size: 35px"> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    <input type="button" value="Del" id="clear" 
    οnclick="onclickclear()" 
    style="height: 70px; width: 190px; font-size: 35px" /> 
    </td> 
    <td colspan="2"> 
    <input type="button" value="=" id="result" 
    οnclick="onclickresult()" 
    style="height: 70px; width: 190px; font-size: 35px" /> 
    </td> 
    </tr> 
    </table> 
        <font size="5" color="ff99ff">Design by:<a target="_blank" href="http://blog.csdn.net/qq_21792169/article/details/50629515" >网络人VS灰鸽子</a> 2016-3-3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱:linux_drv@yeah.net</font>

    <! 这里为了方便我就直接加入空格来布局了,这里能够使用style>
    </body> 
    </html> 

    转载于:https://www.cnblogs.com/blfbuaa/p/7116723.html

    展开全文
  • JavaScript网页计算器代码,该计算器是用DW写的! HTML篇 <html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算器</title> <link ...
  • 利用HTML语言实现界面式计算器的实现,能够实现从键盘和通过鼠标点击输入数字和计算符号,实现基本的加、减、乘、除、取余等操作。
  • 通过div+css和部分布局的...[C%]R$IGDK4J(%3LJXD3]SY.png,废话不多说,最主要的还是分享代码html:Title.计算器- 口 X编辑(E)查看(V)帮助(H)BackspaceCECMC789/sqrtMR456*%MS123-1/xM+0+/-.+=css样式表:body{m...

    通过div+css和部分布局的作用,实现了,如下效果的计算器展示页面

    ![C%]R$IGDK4J(%3LJXD3]SY.png

    ,废话不多说,最主要的还是分享代码:

    html:

    Title

    .

    计算器
    -
    X
    编辑(E)
    查看(V)
    帮助(H)
    Backspace
    CE
    C
    MC
    7
    8
    9
    /
    sqrt
    MR
    4
    5
    6
    *
    %
    MS
    1
    2
    3
    -
    1/x
    M+
    0
    +/-
    .
    +
    =

    css样式表:

    body{

    margin: 0 auto;

    }

    .counter-body{

    position: absolute;

    top: 200px;

    left: 200px;

    border: 2px solid #3335e5;

    width: 245px;

    height: 210px;

    border-radius: 5px;

    background: rgba(217, 217, 217, 0.49);

    }

    .counter-title{

    line-height: 26px;

    width: 100%;

    background: #3335e5;

    color:#fff;

    }

    .counter-title div{

    display: inline-block;

    }

    .counter-title div:first-child{

    margin-right: 70px;

    }

    .counter-title div:nth-child(4){

    background: red;

    }

    .counter-title div:nth-child(2){

    font-size: 18px;

    }

    .counter-title div:nth-child(2),.counter-title div:nth-child(4){

    padding-left: 9px;

    padding-right: 9px;

    }

    .counter-title div:nth-child(2),.counter-title div:nth-child(3),.counter-title div:nth-child(4){

    border-radius: 2px;

    height: 22px;

    border: 1px solid #FFFFFF;

    }

    .counter-title div{

    padding: 0 6px 2px 6px;

    }

    .content-title {

    display: table;

    }

    .content-title div{

    padding-left: 10px;

    text-align: center;

    line-height: 22px;

    display: table-cell;

    font-size: 12px;

    }

    .counter-content-input{

    padding-left: 10px;

    }

    .counter-content-input input{

    height: 15px;

    text-align: right;

    width: 220px;

    }

    .counter-content-btn-row{

    vertical-align: middle;

    margin-top: -15px;

    padding: 25px 10px;

    }

    .counter-content-btn-col1 div:first-child{

    background: rgba(247, 247, 247, 0.87);

    text-shadow: 5px 5px 3px #bfbfbf ;

    color: #fff;

    width: 16px;

    line-height: 15px;

    }

    .counter-content-btn-col1 div:nth-child(2){

    background: rgba(247, 247, 247, 0.87);

    width: 65px;

    padding: 1px 1px;

    }

    .counter-content-btn-col1 div{

    color: red;

    background: rgba(247, 247, 247, 0.87);

    padding: 1px 1px;

    height: 15px;

    border-radius: 2px;

    text-align: center;

    display: inline-block;

    font-size: 10px;

    margin: 0 1.5px;

    border: 1px solid #858585;

    width: 46px;

    }

    .counter-content-btn-row div:nth-child(2),.counter-content-btn-row div:nth-child(3),.counter-content-btn-row div:nth-child(4){

    color: blue;

    }

    .counter-content-btn-row div:nth-child(4n+1){

    color: red;

    }

    .counter-content-btn-col div:first-child{

    background: rgba(247, 247, 247, 0.87);

    margin-right: 4px;

    }

    .counter-content-btn-col div{

    background: rgba(247, 247, 247, 0.87);

    display: inline-block;

    border-radius: 2px;

    text-align: center;

    display: inline-block;

    font-size: 10px;

    margin: 0 2px;

    border: 1px solid #858585;

    width: 24.38px;

    height: 15px;

    }

    .counter-content-btn-col1,.counter-content-btn-col{

    color: red;

    line-height: 15px;

    margin: 1.5px 0 ;

    }

    .counter-content-btn-col div:last-child{

    width: 25px;

    }

    复制代码

    其中,e0d9ca6dc11519bc5c03838787e9bf82.png

    在这个部分实现的时候出现一个小问题就是有个前边儿的无字小方框,本来是一个空格就可以搞定,但是由于空格撑不起来,所以在div相应的部分加入了空格&nbsp

    这个应该是或是这次实现过程中出现的一个小问题吧,

    另外说一点,在这次实现的过程中用到了很多伪类选择器

    也相当于是对伪类选择器的一次练手吧

    加油吧~~~

    fighting~@^-^@~

    展开全文
  • 使用html,JavaScript和css制作的简单科学计算器,无明显bug
  • HTML实现计算器

    千次阅读 2022-07-02 23:15:10
    HTML实现计算器
  • HTML网页计算器

    2020-05-21 13:30:35
    这是一款界面优美的网页计算器代码,功能全面,能够支持键盘输入,且有各种错误处理。供大家参考学习。
  • 3、M按钮实现跳转到一个网页。 4、可以使用小数运算。 二、代码实现: 1、HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title...
  • 基于WEB的html计算器,简单易懂便于理解,适合一些出学者。
  • 使用js + html 实现的简单的网页计算器,可以实现加、减、乘、除复杂运算,二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
  • 本文实例讲述了JS实现基本的网页计算器功能。分享给大家供大家参考,具体如下: <html> <head> <title>网页计算机</title> <meta charset="UTF-8"/> <style type="text/css"&...
  • 摘要:脚本资源,Ajax/JavaScript,网页计算器 网页计算器(javascript版) v1.0  大小:6k  官方网址:适用环境:windows All  语言:html+javascript+css  简介:  网页计算器javascript版 ,可以用于在网站上...
  • HTML,CSS,JS制作一个网页计算器

    千次阅读 2021-03-27 11:10:42
    今天分享一个自己做的网页计算器,我个人感觉,虽然不精简,但是应该涉及到的东西都有了,所以分享出来,那我直接上代码了。 <html> <head> <meta charset="utf-8"> <title>我的计算器<...
  • html实现计算器

    千次阅读 2021-06-10 18:34:49
    doctype html> <html> <head> <meta charset="utf-8"> <title>Calculator</title> </head> <style> *{ font-size:36px;} table{ background-color: thistle; ...
  • 使用javascript,css,html实现的网页计算器,入门级别的代码,适合初学者学习与巩固,代码注释非常详细,还有说明文档。
  • HTML网页上实现的计算器代码

    热门讨论 2010-04-06 16:13:19
    HTML网页上实现的计算器代码,能实现加减乘除能基础功能.
  • 网页制作计算器(源码)

    千次阅读 2020-04-08 18:25:57
    计算器实现功能: 1.可进行普通的四则运算(+、-、*、/); 2.清除屏幕数字,清除单个数字...计算器实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
  • 计算器 HTML | CSS | JS 简单的网页计算器
  • html实现科学计算器

    千次阅读 2021-06-20 20:04:38
    计算器的时候是为了交作业,也参考了一些大佬的作品,交了作业很久才来整理博客,也不太记得具体参考了那一位大佬的,如有冒犯,请联系本人删除。
  • 网页计算器javascript版 ,可以用于在网站上添加此功能,也可以用做学习javascript编程的实例。主要特点如下: 1、采用Javascript+html+css写成,可跨平台运行。无需WEB服务器,可以直接在浏览器上运行。
  • 代码: <!DOCTYPE html> <!-- 计算器 --> <!-- getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 ...
  • 采用js+html实现的计算器,丰富的功能,三种主题,超级计算器不但有计算器的基本功能,还有集合输入,可以计算方差,标准差,sum,avg,logx^y,y√x,多进制转换,π,幂,随机数,阶乘,三角函数,倒计时
  • > 网页计算器 20 21 24 33 36 39 40 41 88 89 22 23 25 26 +27 -28 *29 /30 %31 32 34 35 37 38 42 48 return $numb1+$numb2;49 break;50 case ‘-‘: 51 return $numb1-$numb2;52 break;53 case ‘*‘: 54 return $...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,969
精华内容 3,587
关键字:

网页计算器html代码

友情链接: snow.rar