如何用css js制作计算器？
需要做这个图片样式的计算器，css js怎么设置？要用代码，不用图片，能实现按钮圆角，按钮下方阴影，“标准”按钮切换，以及按钮下变色等功能。麻烦写个完整的，table和div都行，谢谢！
源代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js加减乘除计算器代码</title>
<style>
body,ul{ margin:0px; padding:0px;}
body{ background:#AF6332}
li{ list-style:none;}
.fl{ float:left;}
.fr{ float:right;}
.clearfix:after{ content:""; display:block;clear:both}
.clearfix{zoom:1;}
/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*/
.calBox{ width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:5px; position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-225px; box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; background:#F9F9F9; overflow:hidden}
input{ width:406px; height:82px; margin:10px 7px 0px; border-radius:5px; border:1px solid #64655F; box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; -webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; outline:none; background:#FCFDEB; text-align:right; font-family:"微软雅黑"; font-size:40px; padding:0px 10px;}
ul{}
li{ list-style:none; width:74px; height:34px; line-height:34px; text-align:center; font-family:"微软雅黑"; border:1px solid #8B8B8B; border-radius:5px; background:url(/jscss/demoimg/201402/calBg) repeat-x; float:left; margin:12px 6px 0px;}
.one li{ height:44px; background:url(/jscss/demoimg/201402/calBg1.jpg) repeat-x; line-height:44px;cursor:pointer;}
.one .orange{ background:url(/jscss/demoimg/201402/calBg2.jpg) repeat-x; border:1px solid #875733;}
.one .black{ background:url(/jscss/demoimg/201402/calBg3.jpg) repeat-x; border:1px solid #363636; color:#fff;}
.one .gray{ background:url(/jscss/demoimg/201402/calBg4.jpg) repeat-x; border:1px solid #5F6366;}
.zero{ width:160px;}
.one .deng{ background:url(/jscss/demoimg/201402/calBg5.jpg); height:100px;}
.twoBox{ width:353px; overflow:hidden; }
.two{ width:358px;}
.calBox .three { margin:0px}
.calu{ padding:0px 10px; width:470px;}
</style>
<script type="text/javascript">
function findArr(a,c){for(var b=0;b<a.length;b++){if(a[b]==c){return true}}return false}function getClass(d,f){if(document.getElementsByClassName){return d.getElementsByClassName(f)}else{var a=[];var e=document.getElementsByTagName("*");for(var c=0;c<e.length;c++){var b=e[c].className.split(" ");if(findArr(b,f)){a.push(e[c])}}return a}};
window.onload=function()
{
var aNum=getClass(document,'num');
var oText=document.getElementById('text');
var aPer=getClass(document,'oper');
var oPer=document.getElementById('per');
var oText1=document.getElementById('text1');
var oDeng=getClass(document,'deng')[0];
var oSq=getClass(document,'sq')[0];
var oRec=getClass(document,'rec')[0];
var oZheng=getClass(document,'zheng')[0];
var oOn=getClass(document,'on')[0];
var oOff=getClass(document,'off')[0];
var oClea=getClass(document,'clea')[0];
var bOnOrOffClick=false;
function fnNum(a)
{
var bClear=false;
oText.value='0'
for(var i=0;i<aNum.length;i++)
{
aNum[i].onclick=function()
{
if(!bOnOrOffClick)return;
if(bClear)
{
bClear=false;
}
if(oText.value.indexOf('.')!=-1)
{
if(this.innerHTML=='.')
{
return;
}
}
if(oPer.value&&oText.value&&oText1.value=='')
{
oText1.value=oText.value;
oText.value='';
}
var re=/^0\.{1}\d+$/;
var re1=/^([0]\d+)$/;
oText.value+=this.innerHTML;
if(re.test(oText.value))
{
return;
}
if(re1.test(oText.value))
{
oText.value=this.innerHTML;
}
}
//符号部分的添加
for(var j=0;j<aPer.length;j++)
{
aPer[j].onclick=function()
{
if(oText.value&&oPer.value&&oText1.value)
{
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
}
oPer.value=this.innerHTML;
}
}
//点击等号的时候
oDeng.onclick=function()
{
//+-*/%的情况
if(oText1.value==''&&oPer.value==''&&oText.value=='')
{
return;
}
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
oPer.value='';
bClear=true;
}
//点击开根号的时候
oSq.onclick=function()
{
var m=Math.sqrt(oText.value);
oText.value=m;
}
//点击倒数的时候
oRec.onclick=function()
{
var a=1/oText.value;
if(oText.value=='0')
{
a='正无穷'
}
oText.value=a;
}
//正负号的时候
oZheng.onclick=function()
{
if(oText.value>0)
{
oText.value=-oText.value;
}
else
{
oText.value =-oText.value;
}
}
//清屏的时候
oClea.onclick=function()
{
oText.value='0';
oText1.value='';
oPer.value='';
}
}
}
//on时
oOn.onclick=function()
{
bOnOrOffClick=true;
fnNum(bOnOrOffClick);
}
//off时
oOff.onclick=function()
{
bOnOrOffClick=false;
fnNum(bOnOrOffClick);
oText.value='';
}
}
</script>
</head>
<body>
<div class="calBox">
<div class="calu">
<input type="text" id="text">
<ul class="one clearfix">
<li class="orange on">开机</li>
<li class="orange off">关机</li>
<li class="orange clea">清屏</li>
<li class="black zheng">+/-</li>
<li class="black rec">1/x</li>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="gray oper">/</li>
<li class="black oper">%</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="gray oper">*</li>
<li class="black sq">√</li>
<!-- -->
</ul>
<div class="clearfix">
<div class="twoBox fl">
<ul class="one fl two">
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="gray oper">-</li>
<li class="zero num">0</li>
<li class="num">.</li>
<li class="gray oper">+</li>
</ul>
</div>
<ul class="one three clearfix fl">
<li class="black deng fl">=</li>
</ul>
</div>
</div>
</div>
<input type="text" id="per" style="display:none">
<input type="text" id="text1" style="display:none">
<div style="text-align:center;clear:both">
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js加减乘除计算器代码</title>
<style>
body,ul{ margin:0px; padding:0px;}
body{ background:#AF6332}
li{ list-style:none;}
.fl{ float:left;}
.fr{ float:right;}
.clearfix:after{ content:""; display:block;clear:both}
.clearfix{zoom:1;}
/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*/
.calBox{ width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:5px; position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-225px; box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; background:#F9F9F9; overflow:hidden}
input{ width:406px; height:82px; margin:10px 7px 0px; border-radius:5px; border:1px solid #64655F; box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; -webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; outline:none; background:#FCFDEB; text-align:right; font-family:"微软雅黑"; font-size:40px; padding:0px 10px;}
ul{}
li{ list-style:none; width:74px; height:34px; line-height:34px; text-align:center; font-family:"微软雅黑"; border:1px solid #8B8B8B; border-radius:5px; background:url(/jscss/demoimg/201402/calBg) repeat-x; float:left; margin:12px 6px 0px;}
.one li{ height:44px; background:url(/jscss/demoimg/201402/calBg1.jpg) repeat-x; line-height:44px;cursor:pointer;}
.one .orange{ background:url(/jscss/demoimg/201402/calBg2.jpg) repeat-x; border:1px solid #875733;}
.one .black{ background:url(/jscss/demoimg/201402/calBg3.jpg) repeat-x; border:1px solid #363636; color:#fff;}
.one .gray{ background:url(/jscss/demoimg/201402/calBg4.jpg) repeat-x; border:1px solid #5F6366;}
.zero{ width:160px;}
.one .deng{ background:url(/jscss/demoimg/201402/calBg5.jpg); height:100px;}
.twoBox{ width:353px; overflow:hidden; }
.two{ width:358px;}
.calBox .three { margin:0px}
.calu{ padding:0px 10px; width:470px;}
</style>
<script type="text/javascript">
function findArr(a,c){for(var b=0;b<a.length;b++){if(a[b]==c){return true}}return false}function getClass(d,f){if(document.getElementsByClassName){return d.getElementsByClassName(f)}else{var a=[];var e=document.getElementsByTagName("*");for(var c=0;c<e.length;c++){var b=e[c].className.split(" ");if(findArr(b,f)){a.push(e[c])}}return a}};
window.onload=function()
{
var aNum=getClass(document,'num');
var oText=document.getElementById('text');
var aPer=getClass(document,'oper');
var oPer=document.getElementById('per');
var oText1=document.getElementById('text1');
var oDeng=getClass(document,'deng')[0];
var oSq=getClass(document,'sq')[0];
var oRec=getClass(document,'rec')[0];
var oZheng=getClass(document,'zheng')[0];
var oOn=getClass(document,'on')[0];
var oOff=getClass(document,'off')[0];
var oClea=getClass(document,'clea')[0];
var bOnOrOffClick=false;
function fnNum(a)
{
var bClear=false;
oText.value='0'
for(var i=0;i<aNum.length;i++)
{
aNum[i].onclick=function()
{
if(!bOnOrOffClick)return;
if(bClear)
{
bClear=false;
}
if(oText.value.indexOf('.')!=-1)
{
if(this.innerHTML=='.')
{
return;
}
}
if(oPer.value&&oText.value&&oText1.value=='')
{
oText1.value=oText.value;
oText.value='';
}
var re=/^0\.{1}\d+$/;
var re1=/^([0]\d+)$/;
oText.value+=this.innerHTML;
if(re.test(oText.value))
{
return;
}
if(re1.test(oText.value))
{
oText.value=this.innerHTML;
}
}
//符号部分的添加
for(var j=0;j<aPer.length;j++)
{
aPer[j].onclick=function()
{
if(oText.value&&oPer.value&&oText1.value)
{
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
}
oPer.value=this.innerHTML;
}
}
//点击等号的时候
oDeng.onclick=function()
{
//+-*/%的情况
if(oText1.value==''&&oPer.value==''&&oText.value=='')
{
return;
}
var n=eval(oText1.value+oPer.value+oText.value);
oText.value=n;
oText1.value='';
oPer.value='';
bClear=true;
}
//点击开根号的时候
oSq.onclick=function()
{
var m=Math.sqrt(oText.value);
oText.value=m;
}
//点击倒数的时候
oRec.onclick=function()
{
var a=1/oText.value;
if(oText.value=='0')
{
a='正无穷'
}
oText.value=a;
}
//正负号的时候
oZheng.onclick=function()
{
if(oText.value>0)
{
oText.value=-oText.value;
}
else
{
oText.value =-oText.value;
}
}
//清屏的时候
oClea.onclick=function()
{
oText.value='0';
oText1.value='';
oPer.value='';
}
}
}
//on时
oOn.onclick=function()
{
bOnOrOffClick=true;
fnNum(bOnOrOffClick);
}
//off时
oOff.onclick=function()
{
bOnOrOffClick=false;
fnNum(bOnOrOffClick);
oText.value='';
}
}
</script>
</head>
<body>
<div class="calBox">
<div class="calu">
<input type="text" id="text">
<ul class="one clearfix">
<li class="orange on">开机</li>
<li class="orange off">关机</li>
<li class="orange clea">清屏</li>
<li class="black zheng">+/-</li>
<li class="black rec">1/x</li>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="gray oper">/</li>
<li class="black oper">%</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="gray oper">*</li>
<li class="black sq">√</li>
<!-- -->
</ul>
<div class="clearfix">
<div class="twoBox fl">
<ul class="one fl two">
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="gray oper">-</li>
<li class="zero num">0</li>
<li class="num">.</li>
<li class="gray oper">+</li>
</ul>
</div>
<ul class="one three clearfix fl">
<li class="black deng fl">=</li>
</ul>
</div>
</div>
</div>
<input type="text" id="per" style="display:none">
<input type="text" id="text1" style="display:none">
<div style="text-align:center;clear:both">
</div>
</body>
</html>
温馨提示：内容为网友见解，仅供参考
第1个回答 2013-11-02
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CALCULATOR </title>
<script type="text/javascript" language="javascript">
function calculator(obj){
//alert(isNaN(obj.value));
//alert(obj.value=="÷");
var num=document.getElementById("t").value;
//var firststr=num.charAt(0);
//alert(firststr!=''&&!isNaN(parseFloat(firststr)));
//if(!isNaN(parseFloat(firststr))){
var flag = true;
if(num.length==0){
if(!isNaN(parseInt(obj.value))){
document.getElementById("t").value =obj.value;
}
}else{
if(isNaN(parseFloat(obj.value))){
switch(obj.value){
case "÷":
document.getElementById("t").value +="/";
flag = false;
break;
case "×":
document.getElementById("t").value +="*";
flag = false;
break;
case "＋":
document.getElementById("t").value +="+";
flag = false;
break;
case "－":
document.getElementById("t").value +="-";
flag = false;
break;
case ".":
if(isNaN(parseFloat(num.value))){
document.getElementById("t").value +=".";
}
flag=false;
break;
default:
break;
}
}
if(flag){
var reg=/[\/\*\-\+]{2,}/;
if(obj.value=="="){
var v=document.getElementById("t").value;
if(reg.test(v)){
document.getElementById("t").value="";
}else{
document.getElementById("t").value=eval(document.getElementById("t").value);
}
}else{
document.getElementById("t").value +=obj.value;
}
}
}
}
function clr(){
document.getElementById("t").value="";
}
</script>
</head>
<body>
<div align="center">
<table id="t" border="1">
<caption>计算器</caption>
<tbody>
<tr><td colspan="4"><input id="t" type="text"/></td></tr>
<tr>
<td colspan="4" align="right">
<input type="button" value="清空" onclick =" clr(); "/>
</td>
</tr>
<tr>
<td><input type="button" value="1" onclick="calculator(this);"/></td>
<td><input type="button" value="2" onclick="calculator(this);"/></td>
<td><input type="button" value="3" onclick="calculator(this);"/></td>
<td><input type="button" value="÷" onclick="calculator(this);"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="calculator(this);"/></td>
<td><input type="button" value="5" onclick="calculator(this);"/></td>
<td><input type="button" value="6" onclick="calculator(this);"/></td>
<td><input type="button" value="×" onclick="calculator(this);"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="calculator(this);"/></td>
<td><input type="button" value="8" onclick="calculator(this);"/></td>
<td><input type="button" value="9" onclick="calculator(this);"/></td>
<td><input type="button" value="－" onclick="calculator(this);"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="calculator(this);"/></td>
<td><input type="button" value="0" onclick="calculator(this);"/></td>
<td><input type="button" value="=" onclick="calculator(this);"/></td>
<td><input type="button" value="＋" onclick="calculator(this);"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这是我写的一个计算器，你试一试，其他的你再自己改改，最近比较忙，没空帮你写完整的
<html>
<head>
<title> CALCULATOR </title>
<script type="text/javascript" language="javascript">
function calculator(obj){
//alert(isNaN(obj.value));
//alert(obj.value=="÷");
var num=document.getElementById("t").value;
//var firststr=num.charAt(0);
//alert(firststr!=''&&!isNaN(parseFloat(firststr)));
//if(!isNaN(parseFloat(firststr))){
var flag = true;
if(num.length==0){
if(!isNaN(parseInt(obj.value))){
document.getElementById("t").value =obj.value;
}
}else{
if(isNaN(parseFloat(obj.value))){
switch(obj.value){
case "÷":
document.getElementById("t").value +="/";
flag = false;
break;
case "×":
document.getElementById("t").value +="*";
flag = false;
break;
case "＋":
document.getElementById("t").value +="+";
flag = false;
break;
case "－":
document.getElementById("t").value +="-";
flag = false;
break;
case ".":
if(isNaN(parseFloat(num.value))){
document.getElementById("t").value +=".";
}
flag=false;
break;
default:
break;
}
}
if(flag){
var reg=/[\/\*\-\+]{2,}/;
if(obj.value=="="){
var v=document.getElementById("t").value;
if(reg.test(v)){
document.getElementById("t").value="";
}else{
document.getElementById("t").value=eval(document.getElementById("t").value);
}
}else{
document.getElementById("t").value +=obj.value;
}
}
}
}
function clr(){
document.getElementById("t").value="";
}
</script>
</head>
<body>
<div align="center">
<table id="t" border="1">
<caption>计算器</caption>
<tbody>
<tr><td colspan="4"><input id="t" type="text"/></td></tr>
<tr>
<td colspan="4" align="right">
<input type="button" value="清空" onclick =" clr(); "/>
</td>
</tr>
<tr>
<td><input type="button" value="1" onclick="calculator(this);"/></td>
<td><input type="button" value="2" onclick="calculator(this);"/></td>
<td><input type="button" value="3" onclick="calculator(this);"/></td>
<td><input type="button" value="÷" onclick="calculator(this);"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="calculator(this);"/></td>
<td><input type="button" value="5" onclick="calculator(this);"/></td>
<td><input type="button" value="6" onclick="calculator(this);"/></td>
<td><input type="button" value="×" onclick="calculator(this);"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="calculator(this);"/></td>
<td><input type="button" value="8" onclick="calculator(this);"/></td>
<td><input type="button" value="9" onclick="calculator(this);"/></td>
<td><input type="button" value="－" onclick="calculator(this);"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="calculator(this);"/></td>
<td><input type="button" value="0" onclick="calculator(this);"/></td>
<td><input type="button" value="=" onclick="calculator(this);"/></td>
<td><input type="button" value="＋" onclick="calculator(this);"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这是我写的一个计算器，你试一试，其他的你再自己改改，最近比较忙，没空帮你写完整的
第2个回答 2013-11-01
自己网上去百度下：js计算器代码。
js计算器有现成的，界面要照你这个样子恐怕你求不到的，还规定不准用图片，纯css写这个界面还是要花不少时间的。追问
js计算器有现成的，界面要照你这个样子恐怕你求不到的，还规定不准用图片，纯css写这个界面还是要花不少时间的。追问
我当然知道用css代码很费劲了，要html5和css3，能搜到就不求大神们了~
追答基本上没人会帮你写的。你可以无视我了：）
追问呜呜，其实我也知道╮(╯▽╰)╭正在自己研究~谢谢哈
第3个回答 2013-11-02
去codepen看看，我记得好像见过
用css js做一个网页版的计算器,要有加减乘除运算,和归零删除键_百度知 ...
<!DOCTYPE html> 计数器 + - * \/ =
如何用css js制作计算器?
.clearfix{zoom:1;} \/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*\/ .calBox{ width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:5px; position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-225px; box...
11求一个简单 的js 代码 写的计算器 有加减乘除等号 还有mc mr ms m+...
11求一个简单 的js 代码 写的计算器 有加减乘除等号 还有mc mr ms m+m-就行了 要求每一段代码带上注释重复的肯定不用注释了采纳会追加贰佰分绝不食言... 要求每一段代码带上注释 重复的肯定不用注释了 采纳会追加贰佰分 绝不食言 展开 我来答 2个回答 #热议# 【帮帮团】大学生专场,可获百度...
js文本框 计算器
我随便写了写。写的有点粗，自己调下。加些css.还有计算公司那里我做了最简单的计算。你当然那要写过下 试过。你点下1+2能等于3的 test1: test2: function createOjb(obj,er){ if(document.getElementById(obj.id+"div")!=null){ return;} var div = document.createElement("div");...
微信上的小程序 怎么做一个计算器
小程序就是一套类似的css+js+html的包装，会前段的设计就问题不大，html+css做计算器的界面，js写逻辑，具体请参考小程序开发教程
如何做好网页设计?
网页设计相对带硬件知识的嵌入式编程和PC端网络编程的难度要小多了，一个简单的网页只需要学习html，css，js这三个即可。最后有C语言的基础。我学习网页在2003年非典在家没事上网，想做一个网上在线运行的CRC计算器，即网页版本的CRC计算器。当时只要实现功能即可，界面不需好看，故只需要html+js(因为...
求助js树形菜单DIV+JS结合的谢谢了……
target=_parent>计算器<\/A> <\/TD> <\/TR> <TR> <TD background="" height=3><\/TD> <\/TR> <\/TBODY> <\/TABLE><\/TD> <\/TR> <TR> <TD style="PADDING-LEFT: 20px" background="" height=23><IMG height=9 src="images\/bit05.gif" width=8 align=absMiddle> <A onclick=javascript:ShowFLT...
JAVAscript与css的区别是什么呀?
常用来给HTML网页添加动态功能，比如响应用户的各种操作等。css是一种用来表现HTML或XML等文件样式的语言。比如，使用CSS可以更加灵活地控制具体的页面外观，从精确的布局定位到特定的字体和样式。这2种都是用来做网页的语言，只是使用功能不一样，当然，JS现在可以用来做服务器端开发了。
JS实现获取进今年第几天是周几的方法分析
注：这里采用在线HTML\/CSS\/JavaScript代码运行工具 http:\/\/tools.jb51.net\/code\/HtmlJsRun，运行如下测试代码：function getWeek(str){ var nowyearstr =Date.parse(new Date().getFullYear()); var nowstr =nowyearstr+str*86400000; return new Date(nowstr).getDay();}document.write(get...
如何用js控制a:hover的样式?
可以写一个onmouseover的事件函数，在函数中改变style就可以了。如：document.getElementById("test").onmouseover=function(){ this.style.color="red";} 当然，你还可以再写一个onmouseout事件函数
相似回答
