HTML5+css+JavaScript进行四则运算简易计算器(用按钮实现)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
position: absolute;
left:50%;
top:50%;
margin-left:-125px;
margin-top:-250px;
width: 250px;
height: 400px;
background-image: url(../img/beijing.jpg);/*计算器背景图片，可自行更换*/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js简易计算器</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
70%{transform: rotate(360deg);left:220px;}
100%{transform: rotate(-360deg);left:0px;}
}
#formid{
text-align: center;
}
#tableid{
margin-left: 10px;
}
body,ul,li{
color-stop(.9,rgba(248,248,248,.2)));
background: linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);
color: white;
}
#textid{
width: 210px;
height: 30px;
margin: 5px;
font-size: 25px;
padding: 5px;
}
.mainer{
border-style: dotted;
border-color: cadetblue;
padding: 50px 30px;
<td><input class="btn" type="button" onclick="addStr(5)" value="5"></td>
<td><input class="btn" type="button" onclick="addStr(6)" value="6"></td>
<td><input class="btn" type="button" onclick="addStr('+')" value="+"></td>
list-style-type: none;
display: inline-block;
width: 30px;
height:40px;
text-shadow:0 2px 1px #f4f4f4;
border:1px solid #9fa2ad;
border-radius: 5px;
margin-right:10px;
box-shadow:inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad;
}
.box li span:first-child{
font:15px 'BitstreamVeraSansMonoBold';
<div class="mainer">
<img src="img/1.png" id="animated_div"/>/*动画所用图片元素，可自行更换*/
<form name="form" id="formid">
<input id="textid" type="text" disabled="disabled" placeholder="请输入内容:">
function addStr(x){
inputvalue.value = inputvalue.value + x;
}
function calculates(){
inputvalue.value = eval(inputvalue.value);
}
function empty(){
inputvalue.value = null;
var iMinute=oDate.getMinutes();
var iSecond=oDate.getSeconds();
hour.innerHTML=AddZero(iHours);
minute.innerHTML=AddZero(iMinute);
second.innerHTML=AddZero(iSecond);
<td><input class="btn" type="button" onclick="addStr(7)" value="7"></td>
<td><input class="btn"type="button" onclick="addStr(8)" value="8"></td>
<td><input class="btn" type="button" onclick="addStr(9)" value="9"></td>
<td><input class="btn" type="button" onclick="addStr('-')" value="-"></td>
</tr>
<tr>
<td><input class="btn" type="button" onclick="addStr(4)" value="4"></td>
background: -webkit-gradient(linear,0 0, 0 100%,
color-stop(.2,rgba(248,248,248,.3)),
color-stop(.5,rgba(168,173,190,.5)),
color-stop(.51,rgba(168,173,190,.3)),
<td><input class="btn" type="button" onclick="addStr(3)" value="3"></td>
<td rowspan="2"><input class="btn" style="height: 107px;" onclick="calculates()" type="button" value="="></td>
</tr>
<tr>
<td><input class="btn" type="button" onclick="percent()" value="%"></td>
<td><input class="btn" type="button" onclick="addStr(0)" value="0"></td>
var minute=document.getElementById('minute');
var second=document.getElementById('seconds');
function showTime(){
var oDate=new Date();
var iHours=oDate.getHours();
}
showTime();
setInterval(showTime,1000);
function AddZero(n){
if(n<10){
return '0'+n;
}
return ''+n;
}
</script>
<script>
var inputvalue = document.getElementById("textid");
<td><input class="btn" type="button" onclick="addStr('*')" value="x"></td>
<td><input class="btn" type="button" onclick="del()" value="<"></td>
</tr>
<tr>
</body>
</html>
Css
.btn{
width: 50px;
height: 50px;
font-size: 16px;
margin: 2px;
cursor: pointer; /*鼠标指针指上去变成小手*/
font-weight: bold;
border: none;
background-color: #ff7d52;
</tr>
<tr>
<td><input class="btn" type="button" onclick="addStr(1)" value="1"></td>
<td><input class="btn" type="button" onclick="addStr(2)" value="2"></td>
background-size: 103%,100%;
border-radius: 6px;
}
#animated_div{
width: 25px;
height: 25px;
position: relative;
animation: animated_div 5s 100;
border-radius: 5px;
background: radial-gradient(#eeefef, #d6d7d9);
padding: 50px;
}
.box{
width: 150px;
height: 80px;
margin: 5px 15px;
}
.box li{
position: relative;
text-align: center;ຫໍສະໝຸດ Baidu
}
@keyframes animated_div
{
0%{transform: rotate(0deg);left:0px;}
25%{transform: rotate(360deg);left:0px;}
50%{transform: rotate(0deg);left:220px;}
55%{transform: rotate(0deg);left:220px;}
<table id="tableid">
<tr>
<td><input class="btn" type="button" onclick="empty()" value="C"></td>
<td><input class="btn" type="button" onclick="addStr('/')" value="÷"></td>
background: -moz-radial-gradient(#eeefef, #d6d7d9);
background: -o-radial-gradient(#eeefef, #d6d7d9);
background: -ms-radial-gradient(#eeefef, #d6d7d9);
}
function del(){
inputvalue.value = inputvalue.value.substr(0,inputvalue.value.length-1);
}
function percent(){
inputvalue.value = inputvalue.value/100;
}
</script>
<td><input class="btn" type="button" onclick="addStr('.')" value="."></td>
</tr>
</table>
</form>
<div class="box">
<ul>
<li>
<span id="hour"></span>
<span>时</span>
</li>
<li>
<span id="minute"></span>
<span>分</span>
</li>
<li>
<span id="seconds"></span>
<span>秒</span>
</li>
</ul>
</div>
</div>
<script>
var hour=document.getElementById('hour');
color: #aaffff;
padding: 0;
margin:0;
color: #5F9EA0;
}
a {
color: rgb(1, 124, 185);
text-decoration: none;
}
body{
font-size:16px;
color: #5a5d63;
background: #d6d7d9;
background: -webkit-radial-gradient(#eeefef, #d6d7d9);
left:50%;
top:50%;
margin-left:-125px;
margin-top:-250px;
width: 250px;
height: 400px;
background-image: url(../img/beijing.jpg);/*计算器背景图片，可自行更换*/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js简易计算器</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
70%{transform: rotate(360deg);left:220px;}
100%{transform: rotate(-360deg);left:0px;}
}
#formid{
text-align: center;
}
#tableid{
margin-left: 10px;
}
body,ul,li{
color-stop(.9,rgba(248,248,248,.2)));
background: linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);
color: white;
}
#textid{
width: 210px;
height: 30px;
margin: 5px;
font-size: 25px;
padding: 5px;
}
.mainer{
border-style: dotted;
border-color: cadetblue;
padding: 50px 30px;
<td><input class="btn" type="button" onclick="addStr(5)" value="5"></td>
<td><input class="btn" type="button" onclick="addStr(6)" value="6"></td>
<td><input class="btn" type="button" onclick="addStr('+')" value="+"></td>
list-style-type: none;
display: inline-block;
width: 30px;
height:40px;
text-shadow:0 2px 1px #f4f4f4;
border:1px solid #9fa2ad;
border-radius: 5px;
margin-right:10px;
box-shadow:inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad;
}
.box li span:first-child{
font:15px 'BitstreamVeraSansMonoBold';
<div class="mainer">
<img src="img/1.png" id="animated_div"/>/*动画所用图片元素，可自行更换*/
<form name="form" id="formid">
<input id="textid" type="text" disabled="disabled" placeholder="请输入内容:">
function addStr(x){
inputvalue.value = inputvalue.value + x;
}
function calculates(){
inputvalue.value = eval(inputvalue.value);
}
function empty(){
inputvalue.value = null;
var iMinute=oDate.getMinutes();
var iSecond=oDate.getSeconds();
hour.innerHTML=AddZero(iHours);
minute.innerHTML=AddZero(iMinute);
second.innerHTML=AddZero(iSecond);
<td><input class="btn" type="button" onclick="addStr(7)" value="7"></td>
<td><input class="btn"type="button" onclick="addStr(8)" value="8"></td>
<td><input class="btn" type="button" onclick="addStr(9)" value="9"></td>
<td><input class="btn" type="button" onclick="addStr('-')" value="-"></td>
</tr>
<tr>
<td><input class="btn" type="button" onclick="addStr(4)" value="4"></td>
background: -webkit-gradient(linear,0 0, 0 100%,
color-stop(.2,rgba(248,248,248,.3)),
color-stop(.5,rgba(168,173,190,.5)),
color-stop(.51,rgba(168,173,190,.3)),
<td><input class="btn" type="button" onclick="addStr(3)" value="3"></td>
<td rowspan="2"><input class="btn" style="height: 107px;" onclick="calculates()" type="button" value="="></td>
</tr>
<tr>
<td><input class="btn" type="button" onclick="percent()" value="%"></td>
<td><input class="btn" type="button" onclick="addStr(0)" value="0"></td>
var minute=document.getElementById('minute');
var second=document.getElementById('seconds');
function showTime(){
var oDate=new Date();
var iHours=oDate.getHours();
}
showTime();
setInterval(showTime,1000);
function AddZero(n){
if(n<10){
return '0'+n;
}
return ''+n;
}
</script>
<script>
var inputvalue = document.getElementById("textid");
<td><input class="btn" type="button" onclick="addStr('*')" value="x"></td>
<td><input class="btn" type="button" onclick="del()" value="<"></td>
</tr>
<tr>
</body>
</html>
Css
.btn{
width: 50px;
height: 50px;
font-size: 16px;
margin: 2px;
cursor: pointer; /*鼠标指针指上去变成小手*/
font-weight: bold;
border: none;
background-color: #ff7d52;
</tr>
<tr>
<td><input class="btn" type="button" onclick="addStr(1)" value="1"></td>
<td><input class="btn" type="button" onclick="addStr(2)" value="2"></td>
background-size: 103%,100%;
border-radius: 6px;
}
#animated_div{
width: 25px;
height: 25px;
position: relative;
animation: animated_div 5s 100;
border-radius: 5px;
background: radial-gradient(#eeefef, #d6d7d9);
padding: 50px;
}
.box{
width: 150px;
height: 80px;
margin: 5px 15px;
}
.box li{
position: relative;
text-align: center;ຫໍສະໝຸດ Baidu
}
@keyframes animated_div
{
0%{transform: rotate(0deg);left:0px;}
25%{transform: rotate(360deg);left:0px;}
50%{transform: rotate(0deg);left:220px;}
55%{transform: rotate(0deg);left:220px;}
<table id="tableid">
<tr>
<td><input class="btn" type="button" onclick="empty()" value="C"></td>
<td><input class="btn" type="button" onclick="addStr('/')" value="÷"></td>
background: -moz-radial-gradient(#eeefef, #d6d7d9);
background: -o-radial-gradient(#eeefef, #d6d7d9);
background: -ms-radial-gradient(#eeefef, #d6d7d9);
}
function del(){
inputvalue.value = inputvalue.value.substr(0,inputvalue.value.length-1);
}
function percent(){
inputvalue.value = inputvalue.value/100;
}
</script>
<td><input class="btn" type="button" onclick="addStr('.')" value="."></td>
</tr>
</table>
</form>
<div class="box">
<ul>
<li>
<span id="hour"></span>
<span>时</span>
</li>
<li>
<span id="minute"></span>
<span>分</span>
</li>
<li>
<span id="seconds"></span>
<span>秒</span>
</li>
</ul>
</div>
</div>
<script>
var hour=document.getElementById('hour');
color: #aaffff;
padding: 0;
margin:0;
color: #5F9EA0;
}
a {
color: rgb(1, 124, 185);
text-decoration: none;
}
body{
font-size:16px;
color: #5a5d63;
background: #d6d7d9;
background: -webkit-radial-gradient(#eeefef, #d6d7d9);