用html+css+js扁平风格网页计算器
兼容性目前还未处理
edge效果最好
晚上7点以后会提示是否开启夜间模式，可手动在右上角小按钮切换
以下是代码：
<!--
作者：shsgear@qq.com
时间：2016-10-28
描述：扁平风格网页计算器
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="day.css"/>
</head>
<body>
<div id="outer">
<div id="night"><input type="checkbox" id="night_switch" /><label for='night_switch'></label></div><span style="position: absolute;right: -10px;top: 60px;">By Shsgear@qq.com</span>
<div id="view_area">
<input id="store_area" />
<input id="curr_area" />
</div>
<div id="ctrl_area">
<ul class='clearfix'>
<li class="style1 wipe">C</li>
<li class="style1">%</li>
<li class="style1">÷</li>
<li class="style1">×</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="style1">－</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="style1">+</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="style2">=</li>
<li>0</li>
<li>.</li>
<li class="backspace" id="back"></li>
</ul>
</div>
</div>
<script type="text/javascript">
var oCtrl = document.getElementById('ctrl_area');
var store = document.getElementById('store_area')
var curr = document.getElementById('curr_area');
var back = document.getElementById('back');
var btn = oCtrl.getElementsByTagName('li');
var oInput=document.getElementById('view_area').getElementsByTagName('input');
var flag=false;
for(var i = 0;i<oInput.length;i++){
oInput[i].οnfοcus=function(){
this.blur();
}
}
for (var i=0;i<btn.length;i++) {
btn[i].οnclick=function(){
var num;
var str='0';
switch (this.innerHTML){
case '+': count('+');
break;
case '-': count('-');
break;
case '×': count('*');
break;
case '÷': count('/');
break;
case '%': count('%');
break;
case '=': if(flag==false){store.value+=curr.value}
curr.value = eval(store.value.replace(/\%\/\*\-\+/,''));
curr.value.length < 10 &&(curr.value = curr.value.substr(0,10).replace("NaN",0));
flag=true;
break;
case 'C': store.value='';curr.value='0';
break;
default:
if(flag==true){
curr.value = 0;store.value = "";flag = false;
}
curr.value = (curr.value + this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1");
break;
}
}
}
back.οnclick=function(){
curr.value=curr.value.substr(0,curr.value.length-1)
}
function count(symbol){
if(flag==true){
store.value=curr.value+symbol;
curr.value=symbol;
flag=false;
}else{
if(/[\%\/\*\-\+]$/.test(curr.value)==false) {
store.value += curr.value;
}
curr.value = symbol;
}
if(/[\%\/\*\-\+]$/.test(store.value)==false){
store.value += curr.value;
}
store.value = store.value.slice(-1) != symbol ? store.value.replace(/.$/,symbol):store.value;
}
var oNight=document.getElementById('night_switch');
var oLink=document.getElementsByTagName('link')[0];
oNight.οnclick=function(){
if(oNight.checked){
oLink.href='night.css';
}else{
oLink.href='day.css';
}
}
var timer=setTimeout(function(){
var now=new Date();
var hour=now.getHours();
if(hour>19){
var yes=confirm('晚上了,是否开启夜间模式?')
if(yes){
oNight.checked='checked';
oLink.href='night.css';
setTimeout(function(){},1000)
}
}
},1000)
</script>
</body>
</html>
css源码 day.css
*{
margin: 0;
padding: 0;
}
body{
font-family:'MyriadPro-Cond';
}
#outer{
width: 508px;
border: 1px solid #CCC;
margin: 50px auto;
}
#store_area{
border: none;
width: 100%;
height: 70px;
font-size:30px;
color: RGB(152,152,152);
text-align: right;
box-sizing: border-box;
padding-right: 20px;
line-height: 70px;
}
#curr_area{
border: none;
width: 100%;
height: 100px;
font-size: 50px;
box-sizing: border-box;
text-align: right;
padding-right: 20px;
line-height: 100px;
}
.clearfix:after{
content: '';
display: table;
clear: both;
}
#ctrl_area ul{
list-style: none;
}
ul li{
float: left;
width:125px;
height: 120px;
background:rgb(255,255,255);
border: 1px solid rgb(215,215,215);
font-size: 45px;
text-align: center;
line-height: 120px;
cursor: pointer;
transition: all .2s ease;
}
ul li:hover{
background:rgb(238,238,238) ;
}
ul li.style1{
background:rgb(238,238,238);
}
ul li.style2{
height: 242px;
float: right;
line-height:240px;
color:white;
background: rgb(253,190,14);
}
ul li.wipe{
color: rgb(245,93,80);
}
ul li.backspace{
background-image: url(img/backspace_outline.png);
background-position:center;
background-repeat: no-repeat;
}
#night_switch{
visibility: hidden;
}
#night{
width: 70px;
height: 30px;
background: #333;
border-radius: 30px;
position: relative;
margin:5px;
}
#night:before{
content:'ON';
font-size: 14px;
position: absolute;
left: 8px;
top: 5px;
color: #26ca28;
}
#night:after{
content:'OFF';
font-size: 14px;
position: absolute;
right: 8px;
top: 5px;
color: #26ca28;
}
#night label{
display: block;
width: 30px;
height: 20px;
border-radius: 10px;
background:grey;
position: absolute;
left: 5px;
top: 5px;
z-index: 1;
transition: all .5s ease;
cursor: pointer;
}
#night input[type=checkbox]:checked + label{
font-size: 14px;
left: 35px;
background: #26CA28;
}night.css，大部分相同
*{
margin: 0;
padding: 0;
}
body{
font-family:'MyriadPro-Cond';
}
#outer{
width: 508px;
border: 1px solid #CCC;
margin: 50px auto;
background: rgb(32,32,32);
}
#store_area{
border: none;
width: 100%;
height: 70px;
font-size:30px;
color: white;
text-align: right;
box-sizing: border-box;
padding-right: 20px;
line-height: 70px;
background: rgb(32,32,32);
}
#curr_area{
border: none;
width: 100%;
height: 100px;
font-size: 50px;
box-sizing: border-box;
text-align: right;
padding-right: 20px;
line-height: 100px;
color: white;
background: rgb(32,32,32);
}
.clearfix:after{
content: '';
display: table;
clear: both;
}
#ctrl_area ul{
list-style: none;
}
ul li{
float: left;
width:125px;
height: 120px;
background: rgb(50,50,50);
color: white;
border: 1px solid rgb(215,215,215);
font-size: 45px;
text-align: center;
line-height: 120px;
cursor: pointer;
transition: all .2s ease;
}
ul li:hover{
background:black;
}
ul li.style1{
background:rgb(32,32,32);
}
ul li.style2{
height: 242px;
float: right;
line-height:240px;
color:white;
background:rgb(253,190,14);
}
ul li.wipe{
color: rgb(245,93,80);
}
ul li.backspace{
background-image: url(img/backspace_outline.png);
background-position:center;
background-repeat: no-repeat;
}
#night_switch{
visibility: hidden;
}
#night{
width: 70px;
height: 30px;
background: #333;
border-radius: 30px;
position: relative;
margin:5px;
}
#night:before{
content:'ON';
font-size: 14px;
position: absolute;
left: 8px;
top: 5px;
color: #26ca28;
}
#night:after{
content:'OFF';
font-size: 14px;
position: absolute;
right: 8px;
top: 5px;
color: #26ca28;
}
#night label{
display: block;
width: 30px;
height: 20px;
border-radius: 10px;
background:grey;
position: absolute;
left: 5px;
top: 5px;
z-index: 1;
transition: all .5s ease;
cursor: pointer;
}
#night input[type=checkbox]:checked + label{
left: 35px;
background: #26CA28;
}
689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
