华为内置计时器的JavaScript实现
Posted 森森森0w0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了华为内置计时器的JavaScript实现相关的知识，希望对你有一定的参考价值。
用jquery实现了一个计时器
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>HUAWEI计算器</title>
<link rel="stylesheet" href="http://oa.daoyoudashi.com/shen/saoyisao/css/weui.min.css"/>
<style>
html,body {
height: 100%;
width:100%;
margin: 0;
padding: 0;
}
.weui-cells__title{
color: black;
}
.anniu{
display: flex;
flex-direction: column;
}
.row1,.row2,.row3,.row4{
display: flex;
flex-direction: row;
flex: 1;
}
.number120{
flex: 2;
display: flex;
flex-direction: column;
}
.number12{
display: flex;
flex-direction: row;
}
.number3Point{
flex: 1;
}
.deng{
flex: 1;
}
#deng{
background-color: green;
}
.weui-btn_primary {
background-color: #446749;
}
</style>
</head>
<body ontouchstart="">
<div class="center">
<div class="weui-cells__title">请输入数字</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input" id="input" type="text" placeholder="请输入数字"/>
</div>
</div>
</div>
</div>
<div class="anniu">
<div class="row1">
<div class="but clear">
<a class="weui-btn weui-btn_primary">clear</a>
</div>
<div class="but chu">
<a class="weui-btn weui-btn_primary">÷</a>
</div>
<div class="but cheng">
<a class="weui-btn weui-btn_primary">*</a>
</div>
<div class="but delete">
<a class="weui-btn weui-btn_primary">delete</a>
</div>
</div>
<div class="row2">
<div class="but number7">
<a class="weui-btn weui-btn_primary">7</a>
</div>
<div class="but number8">
<a class="weui-btn weui-btn_primary">8</a>
</div>
<div class="but number9">
<a class="weui-btn weui-btn_primary">9</a>
</div>
<div class="but jiang">
<a class="weui-btn weui-btn_primary">-</a>
</div>
</div>
<div class="row3">
<div class="but number4">
<a class="weui-btn weui-btn_primary">4</a>
</div>
<div class="but number5">
<a class="weui-btn weui-btn_primary">5</a>
</div>
<div class="but number6">
<a class="weui-btn weui-btn_primary">6</a>
</div>
<div class="but jia">
<a class="weui-btn weui-btn_primary">+</a>
</div>
</div>
<div class="row4">
<div class="number120">
<div class="number12">
<div class="but number1">
<a class="weui-btn weui-btn_primary">1</a>
</div>
<div class="but number2">
<a class="weui-btn weui-btn_primary">2</a>
</div>
</div>
<div class="but number0">
<a class="weui-btn weui-btn_primary">0</a>
</div>
</div>
<div class="number3Point">
<div class="but number3">
<a class="weui-btn weui-btn_primary">3</a>
</div>
<div class="but numberPoint">
<a class="weui-btn weui-btn_primary">.</a>
</div>
</div>
<div class="but deng">
<a class="weui-btn weui-btn_primary" id="deng">=</a>
</div>
</div>
</div>
<script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script>
var butHeight=$(‘.but‘)[0].clientHeight;
var bodyWidth=$(‘body‘)[0].clientWidth;
var butWidth=bodyWidth/4;
$(‘.but‘).css(‘width‘,butWidth);
$(‘.number0‘).css(‘width‘,butWidth*2);
$(‘#deng‘).css(‘height‘,butHeight*2);
var result;
$(".clear").click(function(){
$("#input").val(‘‘);
});
$(".delete").click(function(){
result=$("#input").val().substring(0,$("#input").val().length-1);
$("#input").val(result);
});
$(".number0").click(function(){
result=$("#input").val()+‘0‘;
$("#input").val(result);
});
$(".number1").click(function(){
result=$("#input").val()+‘1‘;
$("#input").val(result);
});
$(".number2").click(function(){
result=$("#input").val()+‘2‘;
$("#input").val(result);
});
$(".number3").click(function(){
result=$("#input").val()+‘3‘;
$("#input").val(result);
});
$(".number4").click(function(){
result=$("#input").val()+‘4‘;
$("#input").val(result);
});
$(".number5").click(function(){
result=$("#input").val()+‘5‘;
$("#input").val(result);
});
$(".number6").click(function(){
result=$("#input").val()+‘6‘;
$("#input").val(result);
});
$(".number7").click(function(){
result=$("#input").val()+‘7‘;
$("#input").val(result);
});
$(".number8").click(function(){
result=$("#input").val()+‘8‘;
$("#input").val(result);
});
$(".number9").click(function(){
result=$("#input").val()+‘9‘;
$("#input").val(result);
});
$(".numberPoint").click(function(){
var lastPoint=$("#input").val().lastIndexOf(‘.‘);
var lastjia=$("#input").val().lastIndexOf(‘+‘);
var lastjiang=$("#input").val().lastIndexOf(‘-‘);
var lastcheng=$("#input").val().lastIndexOf(‘*‘);
var lastchu=$("#input").val().lastIndexOf(‘÷‘);
if((lastPoint!=-1)&&(lastchu<lastPoint)&&(lastcheng<lastPoint)&&(lastjia<lastPoint)&&(lastjiang<lastPoint)){
return false; //本身有小数点,同时最后一个小数点后面没有+-*/中的任意一个，不给输入
}
else{ //本身没有小数点或者前面有+-*/种的一个
result=$("#input").val()+‘.‘;
$("#input").val(result);
}
});
$(".jia").click(function(){
var lastOneIndex=$("#input").val().length-1;
if(lastOneIndex==-1){
return false;
}
var lastjia=$("#input").val().lastIndexOf(‘+‘);
var lastjiang=$("#input").val().lastIndexOf(‘-‘);
var lastcheng=$("#input").val().lastIndexOf(‘*‘);
var lastchu=$("#input").val().lastIndexOf(‘÷‘);
if((lastcheng==lastOneIndex)||(lastchu==lastOneIndex)||(lastjia==lastOneIndex)||(lastjiang==lastOneIndex)){
result=$("#input").val().substring(0,$("#input").val().length-1);//删除最后一位;
}
result=result+‘+‘;
$("#input").val(result);
});
$(".jiang").click(function(){
var lastOneIndex=$("#input").val().length-1;
var lastjia=$("#input").val().lastIndexOf(‘+‘);
var lastjiang=$("#input").val().lastIndexOf(‘-‘);
var lastcheng=$("#input").val().lastIndexOf(‘*‘);
var lastchu=$("#input").val().lastIndexOf(‘÷‘);
if((lastcheng==lastOneIndex)||(lastchu==lastOneIndex)||(lastjia==lastOneIndex)||(lastjiang==lastOneIndex)){
result=$("#input").val().substring(0,$("#input").val().length-1);//删除最后一位;
}
result=result+‘-‘;
$("#input").val(result);
});
$(".cheng").click(function(){
var lastOneIndex=$("#input").val().length-1;
if(lastOneIndex==-1){
return false;
}
var lastjia=$("#input").val().lastIndexOf(‘+‘);
var lastjiang=$("#input").val().lastIndexOf(‘-‘);
var lastcheng=$("#input").val().lastIndexOf(‘*‘);
var lastchu=$("#input").val().lastIndexOf(‘÷‘);
if((lastcheng==lastOneIndex)||(lastchu==lastOneIndex)||(lastjia==lastOneIndex)||(lastjiang==lastOneIndex)){
result=$("#input").val().substring(0,$("#input").val().length-1);//删除最后一位;
}
result=result+‘*‘;
$("#input").val(result);
});
$(".chu").click(function(){
var lastOneIndex=$("#input").val().length-1;
if(lastOneIndex==-1){
return false;
}
var lastjia=$("#input").val().lastIndexOf(‘+‘);
var lastjiang=$("#input").val().lastIndexOf(‘-‘);
var lastcheng=$("#input").val().lastIndexOf(‘*‘);
var lastchu=$("#input").val().lastIndexOf(‘÷‘);
if((lastcheng==lastOneIndex)||(lastchu==lastOneIndex)||(lastjia==lastOneIndex)||(lastjiang==lastOneIndex)){
result=$("#input").val().substring(0,$("#input").val().length-1);//删除最后一位;
}
result=result+‘÷‘;
$("#input").val(result);
});
$(".deng").click(function(){
var lastOneIndex=$("#input").val().length-1;
var lastjia=$("#input").val().lastIndexOf(‘+‘);
var lastjiang=$("#input").val().lastIndexOf(‘-‘);
var lastcheng=$("#input").val().lastIndexOf(‘*‘);
var lastchu=$("#input").val().lastIndexOf(‘÷‘);
if((lastcheng==lastOneIndex)||(lastchu==lastOneIndex)||(lastjia==lastOneIndex)||(lastjiang==lastOneIndex)){
result=$("#input").val().substring(0,$("#input").val().length-1); //删除最后一位+-*/
}
var zifu=$("#input").val().split(/[.0-9]+/);//取出+-*/
zifu.pop();
if(zifu[0]==‘‘){
zifu.shift();
}
var numberNeed1=result.split(/[+-]/);
var resultArr=[];
for(var i=0;i<numberNeed1.length;i++){
var numberNeed2=numberNeed1[i].split(/[*÷]/);
for(var j=0;j<numberNeed2.length;j++){
resultArr.push(parseFloat(numberNeed2[j]));
}
}
for(var y=0;y<zifu.length;y++){
if(zifu[y]==‘*‘){
var finalval=resultArr[y]*resultArr[y+1];
resultArr.splice(y,2,finalval);//删除数字，并换成新的
zifu.splice(y,1);//删除符号
y--;
}
if(zifu[y]==‘÷‘){
var finalval=resultArr[y]/resultArr[y+1];
resultArr.splice(y,2,finalval);//删除数字，并换成新的
zifu.splice(y,1);//删除符号
y--;
}
}
if(isNaN(resultArr[0])){ //第一个数为负
resultArr.splice(0,1,0);
}
for(var y=0;y<zifu.length;y++){
if(zifu[y]==‘+‘){
var finalval=resultArr[y]+resultArr[y+1];
resultArr.splice(y,2,finalval);//删除数字，并换成新的
zifu.splice(y,1);//删除符号
y--;
}
if(zifu[y]==‘-‘){
var finalval=resultArr[y]-resultArr[y+1];
resultArr.splice(y,2,finalval);//删除数字，并换成新的
zifu.splice(y,1);//删除符号
y--;
}
}
result=resultArr[0];
$("#input").val(result);
});
</script>
</body>
</html>
以上是关于华为内置计时器的JavaScript实现的主要内容，如果未能解决你的问题，请参考以下文章