原生ＪＳ计算器
来源：互联网 发布：深层网络 编辑：程序博客网 时间：2024/06/01 07:42
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
body{text-align:center;background:url(images/green1.jpg) no-repeat;}
#mydiv{width:400px;height:350px;background:url(images/g2.jpg) no-repeat center;border-radius:6px 12px 6px 12px;border:2px dashed orange;margin:6px auto;text-align:center;}
#outside{width:420px;height:370px;margin:50px auto;overflow:hidden;border-radius:12px 6px 12px 6px;background:rgba(178,250,247,0.2);position:relative;}
label{display:block;width:300px;height:40px;margin:10px auto;background:rgba(211,211,211,0.6);line-height:40px;border-radius:10px;text-align:center;font-size:24px;color:orange;}
button{width:90px;height:50px;font-size:20px;font-family:Arial,"楷体";border-radius:20px 5px 20px 5px;background:rgba(200,200,200,0.3);}
button:hover{background:skyblue;font-size:28px;color:white;}
select{width:90px;display:inline-block;height:50px;border-radius:15px 5px 15px 5px;background:rgba(211,211,211,0.4);}
select:hover{background:orange;color:white;}
#btn0{width:188px;}
#time{position:absolute;right:8px;bottom:15px;width:350px;height:20px;line-height:20px;background:rgba(230,210,100,0.3);font-size:16px;border-radius:18px 5px 18px 5px;font-family:"楷体";}
</style>
<script src="calculator.js"></script>
</head>
<body>
<div id="outside">
<div id="mydiv">
<label id="show" title="此处显示计算结果"></label>
<p>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="delete">←</button>
</p>
<p>
<button id="btn4">4</button>
<button id="btn5">5</button>
<button id="btn6">6</button>
<button id="clear">清空</button>
</p>
<p>
<button id="btn7">7</button>
<button id="btn8">8</button>
<button id="btn9">9</button>
<select id="selectID" onchange="msg();">
<option value="请选择运算符" selected="selected" id="mr">请选择运算符</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="×">×</option>
<option value="÷">÷</option>
<option value="%">%</option>
</select>
</p>
<p>
<button id="btn0">0</button>
<button id="btnxs"><b>.</b></button>
<button id="ok">确定</button>
</p>
</div>
<div id="time"></div>
</div>
</body>
<script>
function msg(){
if(document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value == "+")
{
document.getElementById("show").innerHTML += document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;
}
else if(document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value=="-")
{
document.getElementById("show").innerText += document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;
}
else if(document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value=="×")
{
document.getElementById("show").innerText += document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;
}
else if(document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value=="÷")
{
document.getElementById("show").innerText += document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;
}
else if(document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value=="%")
{
document.getElementById("show").innerText += document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;
}
}
</script>
</html>
<!--下面是引入的js文件-->
window.onload = function (){
//alert("js coming!");
//封装函数，通过标签ID获取此元素
function $(id){
return document.getElementById(id);
}
//获取显示结果label元素
var res = $("show");
//通过tagName数组拿到元素
//分别拿到各个button按钮元素
var btn = document.getElementsByTagName("button");
//1
btn[0].onclick=function(){
res.innerHTML += btn[0].innerHTML;
}
//2
btn[1].onclick=function(){
res.innerHTML += btn[1].innerHTML;
}
//3
btn[2].onclick=function(){
res.innerHTML += btn[2].innerHTML;
}
//4
btn[4].onclick=function(){
res.innerHTML += btn[4].innerHTML;
}
//5
btn[5].onclick=function(){
res.innerHTML += btn[5].innerHTML;
}
//6
btn[6].onclick=function(){
res.innerHTML += btn[6].innerHTML;
}
//7
btn[8].onclick=function(){
res.innerHTML += btn[8].innerHTML;
}
//8
btn[9].onclick=function(){
res.innerHTML += btn[9].innerHTML;
}
//9
btn[10].onclick=function(){
res.innerHTML += btn[10].innerHTML;
}
//0
btn[11].onclick=function(){
res.innerHTML += btn[11].innerHTML;
}
//.
btn[12].onclick=function(){
res.innerHTML += btn[12].innerHTML;
}
//实现+-*/%运算(确定)
btn[13].onmouseover=function(){
btn[13].innerHTML = "=";
}
btn[13].onmouseout=function(){
btn[13].innerHTML = "确定";
}
btn[13].onclick=function(){
var selectID = $("selectID").value;
switch(selectID){
case "+" :
var str = res.innerHTML;
// var arr = str.split("+");
// var result = "="+(Number(arr[0]) + Number(arr[1]));
// res.innerHTML += result;
res.innerHTML = eval(str);
break;
case "-" :
var str = res.innerHTML;
// var arr = str.split("-");
// var result = "="+(Number(arr[0]) - Number(arr[1]));
// res.innerHTML += result;
res.innerHTML = eval(str);
break;
case "×" :
var str = res.innerHTML;
var arr = str.split("×");
var result = (Number(arr[0]) * Number(arr[1]));
// res.innerHTML += result;
res.innerHTML = eval(result);
break;
case "÷" :
var str = res.innerHTML;
var arr = str.split("÷");
var result = (Number(arr[0]) / Number(arr[1]));
// res.innerHTML += result;
res.innerHTML = eval(result);
break;
case "%" :
var str = res.innerHTML;
var arr = str.split("%");
var result = (Number(arr[0]) % Number(arr[1]));
// res.innerHTML += result;
res.innerHTML = eval(result);
break;
default :
break;
}
}
//退格键功能
btn[3].onclick=function(){
var str = res.innerHTML;
var newstr = str.substring(0,str.length - 1);
res.innerHTML = newstr;
}
btn[3].onmouseover=function(){
btn[3].innerHTML = "back";
}
btn[3].onmouseout=function(){
btn[3].innerHTML = "←";
}
//清空按钮
btn[7].onclick=function(){
res.innerHTML = "";
}
btn[7].onmouseover=function(){
btn[7].innerHTML = "clear";
}
btn[7].onmouseout=function(){
btn[7].innerHTML = "清空";
}
//时间函数封装
function now(){
var time = $("time");
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var week = date.getDay();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if(week == 0){
week = "天";
}
if(seconds <10){
seconds = "0"+seconds;
}
if(minutes < 10){
minutes = "0"+minutes;
}
time.innerHTML = "今天是："+year+"年"+month+"月"+day+"日"+" "+"星期"+week+" "+hours+"时"+minutes+"分"+seconds+"秒";
//time字体颜色的改变
time.style.color = "rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",1)";
} //此处不要用document.write打印出来
now();
setInterval(now,1000);
}
- 原生ＪＳ计算器
- 原生js实现计算器
- 原生js的日期计算器
- 【小工具】原生JS的计算器
- 原生js开发简易语音发声的计算器
- Android原生实现 计算器
- 原生JS
- 原生js
- JS原生
- 原生JS
- js -计算器
- js计算器
- js计算器
- JS计算器
- js计算器
- js计算器
- JS计算器
- js计算器
- Linux 共享内存
- 几个概念了解下
- NOIP2012【乌龟棋】
- Android Call分析(一) ---- Call对象详解
- 面向高斯核朴素贝叶斯分类器的特征选择方法
- 原生ＪＳ计算器
- ECLIPSE的换了DARK主题后，有的按钮看不清是否选中，怎么办？
- 软件开发模型
- 字符串连接和重复
- DTD
- 用于求最近公共祖先(LCA)的 Tarjan算法–以POJ1986为例（转）
- nginx内存池
- 简要分析JavaScript中的“闭包”
- IOS-Push通知
