华为内置计时器的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>

时间： 2024-08-02 19:49:26

华为内置计时器的JavaScript实现的相关文章

微信开发-微信内置浏览器的Javascript API

源代码来自 http://www.baidufe.com/ /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.隐藏/显示底部浏览器工具栏 * 6.获取当前的网络状态 * 7.调起微信客户端的图片播放组件 * 8.关闭公众平台Web页面 * 9.判断当前网页是否在微信内置浏览器中打开 * 10.支持WeixinApi的错误监控 * 11.发送电子邮件 *

微信内置浏览器的Javascript API

/**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.隐藏/显示底部浏览器工具栏 * 6.获取当前的网络状态 * 7.调起微信客户端的图片播放组件 *   */ var WeixinApi = (function () { /* 这里省略了一堆代码……下面直接看调用接口 */ return { ready           :wxJsBridgeReady

JavaScript原生函数（内置函数）

1.JavaScript原生函数(内置函数) JavaScript原生函数(内置函数)有: String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 2.创建内置函数 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> &l

微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记

微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 这样的功能,直接调用,会得到

微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏

之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 这样的功能,直接调用,会得到一个访问拒绝的response.后来重新调研了下,整理出来了一个WeixinAPI的Javascript类库,分享出来,如果你对微信公众平台开发感兴趣

微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]

原文地址:  http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 这样的功能,直接调用,会得到一个访问拒绝的respons

微信内置浏览器的JS API

/**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享(for iOS) * 5.隐藏/显示右上角的菜单入口 * 6.隐藏/显示底部浏览器工具栏 * 7.获取当前的网络状态 * 8.调起微信客户端的图片播放组件 * 9.关闭公众平台Web页面 * 10.判断当前网页是否在微信内置浏览器中打开 * 11.增加打开扫描二维码 * 12.支持WeixinAp

JavaScript中的内置对象

1.Date 日期对象 (1)语法:var mydate=new Date(); (2)参数说明:mydate 成为日期对象,并且已有初始值:当前时间(当前电脑系统时间). (3)访问方法语法:<日期对象>.<方法>; (4)Date对象中处理时间和日期的常用方法: (5)注意事项:get/setTime() 返回/设置时间,单位是毫秒数; 时间推迟 1 小时,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);” 2.String字符串对象

了解URL编码的基本概念，在javascript和java程序中使用内置的API进行编码和解码

1.URL编码的基本概念 URL只能使用US-ASCII 字符集来通过因特网进行发送.由于URL常常会包含 ASCII 集合之外的字符,URL必须转换为有效的 ASCII 格式.URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符.URL 不能包含空格,URL 编码通常使用 + 来替换空格.所谓URL编码,就是将非US-ASCII字符和US-ASCII中的特殊字符,用相应的字符集编码来表示.比如,汉字"你",如果用UTF-8编码,出现在URL