我想用CSS更多地设计我的计算器 [英] I want to style my calculator more with CSS
本文介绍了我想用CSS更多地设计我的计算器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，我用JavaScript制作了一个计算器，我用CSS设计了它。
我想把它的样式更像是这个链接中的计算器。
http://www.online-calculator.com [ ^ ]
但我可以'弄清楚如何在我的计算器中结合这些功能...
plz帮我编码。
这是我的html代码：
Hello guys I made a calculator using JavaScript and I styled it using CSS.
I want to style it more like the calculator in this link.
http://www.online-calculator.com[^]
but i can''t figure out how to combine those features in my calculator...
plz help me with coding.
Here is my html code:
<html>
<head>
<TITLE>Javascript Calculator</TITLE>
<link type="text/css" rel="stylesheet" href="styles/calculator.css" />
<script type="text/javascript">
var Overall="", First="", Second="", Opp="";
function init()
{
Clear();
}
function MyClick($key)
{ var Display="";
if(Opp == ""){
First = First + $key;
document.getElementById('screen').innerHTML = First;
}else{
Second = Second + $key;
Display = document.getElementById('screen').innerHTML;
document.getElementById('screen').innerHTML = First + ' ' + Opp + ' ' + Second;
}
}
function Operator($sign)
{ var Display="";
Opp = $sign;
// See if the first and second factors have values ie: there has already been an equation
if(First != "" && Second != "") DoSum();
Display = document.getElementById('screen').innerHTML;
document.getElementById('screen').innerHTML = Display + ' ' + Opp + ' ';
}
function Clear()
{
First = "";
Second = "";
Opp = "";
Overall = "";
document.getElementById('screen').innerHTML = '0';
}
function DoSum()
{
var string;
result=0;
if(First != "" && Second != "" && Opp != "")
{
string = First + ' ' + Opp + ' ' + Second;
Overall = eval(string);
document.getElementById('screen').innerHTML = Overall;
// Now clear the First, Second and Opp variables for further use
First = Overall;
Second = "";
Opp = "";
}
}
</script>
</head>
<body>
<div id="frame">
<div id="window"> <!-- this is the window that holds the digits -->
<div id="screen"><!-- this displays the information that the javascript functions provide -->
</div><!-- end of screen div -->
</div><!-- end of window div -->
<div id="key1" onclick="MyClick(1)"><div id="digit">1</div></div>
<div id="key2" onclick="MyClick(2)"><div id="digit">2</div></div>
<div id="key3" onclick="MyClick(3)"><div id="digit">3</div></div>
<div id="plus" onclick="Operator('+')"><div id="digit">+</div></div>
<div id="key4" onclick="MyClick(4)"><div id="digit">4</div></div>
<div id="key5" onclick="MyClick(5)"><div id="digit">5</div></div>
<div id="key6" onclick="MyClick(6)"><div id="digit">6</div></div>
<div id="key7" onclick="MyClick(7)"><div id="digit">7</div></div>
<div id="key8" onclick="MyClick(8)"><div id="digit">8</div></div>
<div id="key9" onclick="MyClick(9)"><div id="digit">9</div></div>
<div id="min" onclick="Operator('-')"><div id="digit">-</div></div>
<div id="key0" onclick="MyClick(0)"><div id="digit">0</div></div>
<div id="period" onclick="MyClick('.')"><div id="digit">.</div></div>
<div id="equals" onclick="DoSum()"><div id="digit">=</div></div>
<div id="mult" onclick="Operator('*')"><div id="digit">*</div></div>
<div id="divided" onclick="Operator('/')"><div id="digit">/</div></div>
<div id="clear" onclick="Clear()"><div id="digit">C</div></div>
</div><!-- End frame div -->
</body>
</html>
这是我的CSS代码：< br $> b $ b
And here is my CSS code:
body{
margin:50px;
}
#frame
{
position:absolute;
left :50px;
top :50px;
height :398px;
width :244px;
border :1px solid #069ff7;
}
#window
{
padding :5px;
height :50px;
width :182px;
font :30px verdana;
position:absolute;
left :22px;
top :22px;
border :1px solid #069ff7;
}
#digit
{
text-align: center;
vertical-align:center;
font :30px Comic Sans Ms;
}
#key1
{
position :absolute;
left :22px;
top :94px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key1:hover
{
color:red;
}
#key2
{
position :absolute;
left :88px;
top :94px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key2:hover
{
color:red;
}
#key3
{
position :absolute;
left :154px;
top :94px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key3:hover
{
color:red;
}
#key4
{
position :absolute;
left :22px;
top :143px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key4:hover
{
color:red;
}
#key5
{
position :absolute;
left :88px;
top :143px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key5:hover
{
color:red;
}
#key6
{
position :absolute;
left :154px;
top :143px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key6:hover
{
color:red;
}
#key7
{
position :absolute;
left :22px;
top :192px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key7:hover
{
color:red;
}
#key8
{
position :absolute;
left :88px;
top :192px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key8:hover
{
color:red;
}
#key9
{
position :absolute;
left :154px;
top :192px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key9:hover
{
color:red;
}
#key0
{
position :absolute;
left :22px;
top :241px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#key0:hover
{
color:red;
}
#period
{
position :absolute;
left :88px;
top :241px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#period:hover
{
color:red;
}
#clear
{
position :absolute;
left :154px;
top :339px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#clear:hover
{
color:red;
}
#plus
{
position :absolute;
left :154px;
top :241px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}#plus:hover
{
color:red;
}
#min
{
position :absolute;
left :22px;
top :290px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#min:hover
{
color:red;
}
#mult
{
position :absolute;
left :88px;
top :290px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#mult:hover
{
color :red;
}
#divided
{
position :absolute;
left :154px;
top :290px;
cursor :pointer;
width :59px;
height :38px;
border :1px solid #069ff7;
}
#divided:hover
{
color:red;
}
#equals
{
position :absolute;
left :22px;
top :339px;
cursor :pointer;
width :125px;
height :38px;
border :1px solid #069ff7;
}
#equals:hover
{
color :red;
}
Can you help me add some good features to this while keeping above css features also???
Greatly appreciate if you can he lp me....
Thanks
Can you help me add some good features to this while keeping above css features also???
Greatly appreciate if you can help me....
Thanks
推荐答案
key)
{ var Display=\"\";
if(Opp == \"\"){
First = First +
key) { var Display=""; if(Opp == ""){ First = First +
key;
document.getElementById('screen').innerHTML = First;
}else{
Second = Second +
key; document.getElementById('screen').innerHTML = First; }else{ Second = Second +
key;
Display = document.getElementById('screen').innerHTML;
document.getElementById('screen').innerHTML = First + ' ' + Opp + ' ' + Second;
}
}
function Operator(
key; Display = document.getElementById('screen').innerHTML; document.getElementById('screen').innerHTML = First + ' ' + Opp + ' ' + Second; } } function Operator(
这篇关于我想用CSS更多地设计我的计算器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
