设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 1089|回复: 0

[经验分享] 华为内置计时器的JavaScript实现

[复制链接]
昊漫玉

尚未签到
发表于 2017-7-10 17:52:02 | 显示全部楼层 |阅读模式
　　用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(){


　　　 result=$("#input").val();
      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.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>

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-392466-1-1.html 上篇帖子： 2014华为上机题（转） 下篇帖子： Android项目的targetSDK>=23，在低于Android6.0的部分测试机（类似华为）上运行时出现的系统权限问题
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表