精华内容
下载资源
问答
  • jQuery的一些计算了解一下   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&...

    jQuery的一些计算了解一下

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    	<style type="text/css">
    		.content{width: 1000px;margin: auto;}
    		.content table{width: 100%;text-align: center;border-collapse:collapse;}
    		.content table td,th{border: 1px solid #ccc;}
    		input[type="checkbox"]{cursor: pointer;}
    		input[type="text"]{width: 50px;text-align: center;margin: 5px 0}
    		.clickspan{width: 20px;text-align: center;margin: 5px 0;background: #000;display: inline-block;color: #fff;cursor: pointer;}
    		.tots{float: right;padding: 0 10px;}
    		#show_total_price{color: red;font-weight: bold;}
    	</style>
    	<script type="text/javascript">
    
    		/**
    		 * 计算总价
    		 * @param optobj 操作的对象
    		 */
    		//注意 js计算值的时候需要转换数值类型;比如:整型、浮点型
    		function calculate_total_price(optobj) {
    			var all_total_price = 0;//全部的总价
    			jQuery(optobj).each(function () {
    				if (jQuery(this).is(":checked")){
    					var price = jQuery(this).val();
    					var num_val = jQuery(this).parents('tr').find('.num_val').val();
    					var single_total_price = (parseInt(num_val)*parseFloat(price));//单个的总价
    					all_total_price += parseFloat(single_total_price);
    
    					var single_tofixed = single_total_price.toFixed(2);//保留两位小数
    					jQuery(this).parents('tr').find('.show_price').text(single_tofixed);
    				}
    			});
    			var all_tofixed = all_total_price.toFixed(2);//保留两位小数
    			jQuery('#show_total_price').text(all_tofixed);
    		}
    
    		/**
    		 * 全选/取消全选
    		 * @param obj 当前对象
    		 * @param optobj 操作的对象
    		 */
    		function check_select_all(obj,optobj) {
    			if (jQuery(obj).is(":checked")){
    				jQuery(optobj).attr("checked",true);
    			}else {
    				jQuery(optobj).attr("checked",false);
    			}
    			calculate_total_price(optobj);
    		}
    
    		/**
    		 * 单选/取消单选
    		 * @param obj 对象
    		 * @param optobj 操作的对象
    		 * @param ids 全选框ID值
    		 */
    		function check_single_select(obj,optobj,ids) {
    			var lens = jQuery(optobj).length;
    			var nums = 0;
    			jQuery(optobj).each(function () {
    				if (jQuery(this).is(":checked")){
    					nums++;
    				}
    			});
    			if (nums == lens){
    				jQuery('#'+ids).attr("checked",true);
    			} else {
    				jQuery('#'+ids).attr("checked",false);
    			}
    			calculate_total_price(optobj);
    		}
    
    
    
    		jQuery(function () {
    			jQuery('input[name="id[]"]').click(function () {
    				check_single_select(this,'input[name="id[]"]','check_all');
    			});
    			jQuery('.reduce').click(function () {
    				var num_vals = jQuery(this).parents('tr').find('.num_val').val();
    				var num_ss = parseInt(num_vals)-1;//先减去,用来判断值
    				if (isNaN(num_vals) || num_ss <= 0){ //判断为字符串的时候 或者 小于等于零的时候
    					jQuery(this).parents('tr').find('.num_val').val(1);
    				}else {
    					jQuery(this).parents('tr').find('.num_val').val(parseInt(num_vals)-1);
    				}
    				calculate_total_price('input[name="id[]"]');
    			});
    
    			jQuery('.increase').click(function () {
    				var num_vals = jQuery(this).parents('tr').find('.num_val').val();
    				if (isNaN(num_vals)){ //判断为字符串的时候
    					jQuery(this).parents('tr').find('.num_val').val(1);
    				}else {
    					jQuery(this).parents('tr').find('.num_val').val(parseInt(num_vals)+1);
    				}
    				calculate_total_price('input[name="id[]"]');
    			});
    
    			jQuery('.num_val').blur(function () {
    				var num_vals = jQuery(this).val();
    				if (isNaN(num_vals)){ //判断为字符串的时候
    					jQuery(this).val(1);
    				}
    				calculate_total_price('input[name="id[]"]');
    			});
    
    			jQuery('.delete_data').click(function () {
    				jQuery(this).parents('tr').remove();
    				calculate_total_price('input[name="id[]"]');
    			});
    		});
    
    	</script>
    </head>
    <body>
    <div class="content">
    	<table cellpadding="0" cellspacing="0">
    		<tr>
    			<th width="60"><label><input type="checkbox" id="check_all" onclick="check_select_all(this,'input[name=\'id[]\']')"></label></th>
    			<th>名称</th>
    			<th>数量</th>
    			<th>单价</th>
    			<th>总价</th>
    			<th>操作</th>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="100"></label></td>
    			<td>标题01</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="1"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>100</td>
    			<td class="show_price">100</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="300"></label></td>
    			<td>标题02</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="2"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>300</td>
    			<td class="show_price">600</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="500"></label></td>
    			<td>标题03</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="5"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>500</td>
    			<td class="show_price">2500</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="230"></label></td>
    			<td>标题04</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="2"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>230</td>
    			<td class="show_price">460</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="100"></label></td>
    			<td>标题05</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="5"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>100</td>
    			<td class="show_price">500</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="222.58"></label></td>
    			<td>标题06</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="6"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>222.58</td>
    			<td class="show_price">1335.48</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="100"></label></td>
    			<td>标题07</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="2"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>100</td>
    			<td class="show_price">200</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="400"></label></td>
    			<td>标题08</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="2"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>400</td>
    			<td class="show_price">800</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="100"></label></td>
    			<td>标题09</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="1"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>100</td>
    			<td class="show_price">100</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    		<tr>
    			<td><label><input type="checkbox" name="id[]" value="150"></label></td>
    			<td>标题10</td>
    			<td>
    				<span class="clickspan reduce">-</span>
    				<label><input type="text" class="num_val" value="2"></label>
    				<span class="clickspan increase">+</span>
    			</td>
    			<td>150</td>
    			<td class="show_price">300</td>
    			<td><a href="javascript:;" class="delete_data">删除</a></td>
    		</tr>
    	</table>
    	<table>
    		<tr>
    			<td style="border-top: 0;"><p class="tots">总价:<span id="show_total_price">0.00</span></p></td>
    		</tr>
    	</table>
    </div>
    </body>
    </html>

     

    基本显示效果:

     

    展开全文
  • 计算某一时刻n分钟前后的时间 let newTime = new Date('2020-10-28 15:20:56'); let fiveMinBefore = newTime.getTime() - 5 * 60 * 1000; let fiveMinAfter = newTime.getTime() + 5 * 60 * 1000; let startTime = ...

    计算某一时刻n分钟前后的时间

    let newTime = new Date('2020-11-11 15:20:56');
    let fiveMinBefore = newTime.getTime() - 5 * 60 * 1000;   // 5分钟 getTime()方法获取到毫秒数
    let fiveMinAfter = newTime.getTime() + 5 * 60 * 1000;
    let startTime = getTimesFun({
    	setTimes: fiveMinBefore,           
    	type:'yy-mm-dd hh:mm:ss'
    })
    let endTime = getTimesFun({
    	setTimes: fiveMinAfter,
    	type:'yy-mm-dd hh:mm:ss'
    })
    console.log(startTime,endTime);
    
    

    在实际vue开发项目中,写在一个js文件内export出去
    在需要使用的文件内再import {getTime} from “xxx.xxx”
    使用ES6语法,可以去看看阮一峰ES6教程写的很好,可以学习

    //把标准时间变成yy-mm-dd hh:mm:ss的时间格式
    //可以适量简化代码
    export const getTimesFun({ setTimes = null, type = null } = {}) => {    
    	if (setTimes) {
    		nowTime = new Date(setTimes);
    	} else if (setTimes == null) {
    		return '';
    	}else {
    		nowTime = new Date();
    	}
    	let year = nowTime.getFullYear();
    	let mon = nowTime.getMonth() + 1;
    	let day = nowTime.getDate();
    	let hour = nowTime.getHours();
    	let min = nowTime.getMinutes();
    	let sec = nowTime.getSeconds();
    	let time = {
    		year: year,
    		mon: numFun(mon),
    		day: numFun(day),
    		hour: numFun(hour),
    		min: numFun(min),
    		sec: numFun(sec),
    	}
    	switch (type) {
    	// 可自己加上其他时间显示模式
    		case 'yy-mm-dd':
    			return time.year + '-' + time.mon + '-' + time.day;
    			break;
    		case 'yy-mm-dd hh:mm:ss':
    			return time.year + '-' + time.mon + '-' + time.day + " " + time.hour + ':' + time.min + ':' + time.sec;
    			break;
    		default:
    			return time;
    			break;
    	}
    }
    //少于10前加0
    const numFun = (num) => {
    	if (num < 10) {
    		return "0" + num;
    	} else {
    		return num;
    	}
    }
    
    

    附加上一个计算几个月前日期的方法

    //计算几个月前日期  
    //调用monthFun(year, month, 3) 3个月前
    const monthFun = (year, month, num) => {
      let time = '';
      if(month <= num){
        year = year - 1;
        month = numFun(month - num +12);
    
        time =  year + '-' + month ;
        return time
      }
      else{
        month = numFun(month - num);
        time =  year + '-' + month ;
        return  time;
      }
    }
    
    展开全文
  • 在做批量上传时,使用的是js动态创建fileupload控件,在创建出来的控件里上传文件时,判断长传的大小,超出时,进行提示并清空当前的fileupload 一、单个上传文件时的Js判断大小验证 var templength=0;//保存...

    在做批量上传时,使用的是js动态创建fileupload控件,在创建出来的控件里上传文件时,判断长传的大小,超出时,进行提示并清空当前的fileupload

    一、单个上传文件时的Js判断大小验证

    <script language="javascript" type="text/javascript">
    var templength=0;//保存所有的长度的变量
     var flength=10240;  //设置上传的文件最大值(单位:kb),超过此值则不上传。
    function getFileSize(filename,e)
    {  
         try {      

     var fso,f,fname,fsize;
     fso=new ActiveXObject("Scripting.FileSystemObject");
     f=fso.GetFile(filename);//文件的物理路径
      fname=fso.GetFileName(filename);//文件名(包括扩展名)
     fsize=f.Size;  //文件大小(bit)
     fsize=fsize/1024;//计算当前上传文件的大小,
     if(fsize>1024)//如果单次上传的文件大小超过1MB
     {
        alert("您上传的文件大小为:"+(fsize/1024).toFixed(2)+"MB\n超过单个最大限度1MB,不允许上传 "); //进行提示
        clearFileInputByOuterHTML(''+e+'');//删除掉当前上传的文件
        return false;
     }
     else
     {
    templength+=fsize;//计算总值
     if(templength>flength)//如果长传的文件的总的大小超过了指定的flength。进行指示,将清空所有的上传控件
     { 
    alert("您上传的文件大小为:"+(templength/1024).toFixed(2)+"MB\n超过最大限度"+flength/1024+"MB,不允许上传 ");
    templength=0;
    clearall();
     return false;
     }
    }
       }

          catch(e)

     {

      alert(e+"\n 跳出此消息框,是由于你的activex控件没有设置好,\n"+

      "你可以在浏览器菜单栏上依次选择\n"+

      "工具->internet选项->\"安全\"选项卡->自定义级别,\n"+

      "打开\"安全设置\"对话框,把\"对没有标记为安全的\n"+

      "ActiveX控件进行初始化和脚本运行\",改为\"启动\"即可");
               return false;
     }   return true;

    }


      function clearFileInputByOuterHTML(fileId) //这个方法是根据Id清空上传控件的方法

    {
       var fileobj = document.getElementById(fileId);
       fileobj.outerHTML = fileobj.outerHTML;
      }
      function clearall()//清空上传控件的方法
      {
      clearFileInputByOuterHTML('FileUpload1');

      }
    </script>

    二、动态上传文件时的Js判断大小验证

      <script type="text/javascript">   

    var id=0;
     function addFile() {    
       var tab=document.getElementById("_container");  
        var row=document.createElement("tr");  
        var cell=document.createElement("td");  
       cell.innerHTML+='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
      var f = document.createElement("input"); 
       f.setAttribute("id", (id+1)) ;              
          f.setAttribute("type", "file")
          f.setAttribute("name", "File")
          f.setAttribute("size", "17")   
           f.οnchange=function(){
    var fso,fpath,fname,fsize;

    try
    {       

                 fso=new ActiveXObject("Scripting.FileSystemObject");
                 fpath=fso.GetFile(f.value);//文件的物理路径
                  fname=fso.GetFileName(f.value);//文件名(包括扩展名)
                 fsize=fpath.Size;  //文件大小(bit)
                 fsize=fsize/1024;//计算当前上传文件的大小
                 if(fsize>1024)
                 {
                    alert("您上传的文件大小为:"+(fsize/1024).toFixed(2)+"MB\n超过单个最大限度1MB,不允许上传 ");
                    clearFileInputByOuterHTML(''+f.id+'');

                 }
                 else
                 {
                    templength+=fsize;//计算总值
                     if(templength>flength)
                     {                 
                            alert("您上传的文件大小为:"+(templength/1024).toFixed(2)+"MB\n超过最大限度"+flength/1024+"MB,不允许上传 ");
                            templength=0;
                            clearall();
                     }
                }
       }
    catch(e)
     {
     // clearFileInputByOuterHTML(''+(id+1)+'');
     
      alert(e+"\n 跳出此消息框,是由于你的activex控件没有设置好,\n"+

      "你可以在浏览器菜单栏上依次选择\n"+

      "工具->internet选项->\"安全\"选项卡->自定义级别,\n"+

      "打开\"安全设置\"对话框,把\"对没有标记为安全的\n"+

      "ActiveX控件进行初始化和脚本运行\",改为\"启动\"即可");           
     }        
    }       
      
          var txtValue=document.createElement("input");
          txtValue.setAttribute("type", "text") 
        
          txtValue.setAttribute("name","txt"+(id+1));
          txtValue.setAttribute("Id","txt"+(id+1));
    //      txtValue.style.borderColor ='black';    
          cell.appendChild(txtValue);
        cell.appendChild(f);        
         var btndele=document.createElement("input");
          btndele.setAttribute("type","button")
          btndele.setAttribute("className","btn1_mouseout")
           btndele.setAttribute("value","删除")
         btndele.style.borderColor ='black';
           btndele.setAttribute("Id","del"+id);
    btndele.οnclick=function(){
    //删除行
    while(btndele.tagName!="TR"){  btndele =btndele.parentNode;    
     btndele.parentNode.removeChild(btndele);}};
       cell.appendChild(btndele);   
        row.appendChild(cell);  
        tab.appendChild(row);   
       id++;    
        }

    html标签

     

     

    <table border="0">
                                                                                                            <tbody id="_container">
                                                                                                                <tr>
                                                                                                                    <td>
                                                                                                                        上传提示:<span style="color: red">单个文件大小不得超过1MB,总容量不超过10MB,否则无法上传,谢谢合作。
    </span>
                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                                <tr>
                                                                                                                          <td>
                                                                                                                        文件名:<input type="text"  id="txt0" name="txt0"/><input type="file" id="FileUpload1" name="File" style=" width: 214px;" onpropertychange="getFileSize(this.value,this.id)" />
                                                                                                                              &nbsp;&nbsp;
                                                                                                                        <input type="button" value="继续添加" οnclick="addFile()"  id="btnContinue" class="btn1_mouseout"   style="border-color:Black;"/>
                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                            </tbody>
                                                                                                        </table>

     

    展开全文
  • JS语言编写计算机

    千次阅读 2017-06-22 20:33:21
    上周我们JS没有学习新的内容,对之前学的知识进行了总结复习。喜欢搞事情的我们做出来了一个本人感觉很有趣的东西,简易计算器。 下面是代码部分:<!DOCTYPE html> 计算机 <style type=

    本周因为要考试,所以博客写的有些迟。上周我们JS没有学习新的内容,对之前学的知识进行了总结复习。喜欢搞事情的我们做出来了一个本人感觉很有趣的东西,简易计算器。
    下面是代码部分:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>计算机</title>
            <style type="text/css">
                *{margin: 0;padding: 0;}
                table{width: 400px;margin: 30px auto;}
                table tr td{ width: 100px;height: 52px;text-align: center;line-height: 50px;}
                td input[type=button]{width: 99%;height: 99%;font-size: 32px;background: #ddd;border: none;}
                td input[type=text]{width: 99%;height: 99%;text-align: right;font-size: 32px;}
                #show{margin-bottom: 10px;}
                .btn:hover {background: #ccc;}
            </style>
        </head>
        <body>
            <table cellspacing="0" cellpadding="0">
                <tr><td colspan="4"><input type="text" disabled id="show" value="" /></td></tr>
                <tr>
                    <td colspan="2"><input class="btn" type="button"id="" value="DEL" /> </td>
                    <td colspan="2"><input class="btn" type="button"id="" value="C" /> </td>
                </tr>
                <tr>
                    <td><input class="btn" type="button" value="1" /></td>
                    <td><input class="btn" type="button" value="2" /></td>
                    <td><input class="btn" type="button" value="3" /></td>
                    <td><input class="btn" type="button" value="+" /></td>
                </tr>
                <tr>
                    <td><input class="btn" type="button" value="4" /></td>
                    <td><input class="btn" type="button" value="5" /></td>
                    <td><input class="btn" type="button" value="6" /></td>
                    <td><input class="btn" type="button" value="-" /></td>
                </tr>
                <tr>
                    <td><input class="btn" type="button" value="7" /></td>
                    <td><input class="btn" type="button" value="8" /></td>
                    <td><input class="btn" type="button" value="9" /></td>
                    <td><input class="btn" type="button" value="*" /></td>
                </tr>
                <tr>
                    <td><input class="btn" type="button" value="." /></td>
                    <td><input class="btn" type="button" value="0" /></td>
                    <td><input class="btn" type="button" value="=" /></td>
                    <td><input class="btn" type="button" value="/" /></td>
                </tr>
            </table>
    
            <script type="text/javascript">
                var txt=document.getElementById("show");
                var obtn=document.getElementsByClassName("btn");
                var arr=[];
    
                //alert(obtn.length);
                for(var i=0;i<obtn.length;i++){
    
                    obtn[i].onclick=function(){
                        //判断是否为数字
                        if(!isNaN(this.value)||this.value=="."){
                            if(txt.value.indexOf(".")== -1){
                                txt.value +=this.value;
                            }else if(this.value!="."){
                                    txt.value +=this.value;
                                }else{
                                if(txt.value.indexOf("+")!=-1||txt.value.indexOf("-")!=-1||txt.value.indexOf("*")!=-1||txt.value.indexOf("/")!=-1){
                                //alert(1);
                                arr[arr.length]=txt.value;
                                txt.value=this.value;
                                }
                            }
    
                        }else if(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/"){
                                if(txt.value.indexOf("+")==-1||txt.value.indexOf("-")==-1||txt.value.indexOf("*")==-1||txt.value.indexOf("/")==-1){
                                    arr[arr.length]=txt.value;
                                    txt.value=this.value;
    
                                }
                        }else if(this.value=="="){
                            arr[arr.length]=txt.value;
                            var str="";
                            for(var a in arr){
                                str+=arr[a];
                            }
                            txt.value=eval(str);
                            //eval(),,专门用来计算表达式标签。
                        }else if(this.value=="C"){
                            txt.value="";
                            arr=[];
                        }else if(this.value=="DEL"){
                            txt.value = txt.value.substr(0, txt.value.length - 1);
                        }
                        //console.log(arr);
                    }
    
                }
            </script>
        </body>
    </html>


    运行结果:

    这里写图片描述

    html和css部分还和之前的一样比较简单,定义所有的按钮和显示屏幕,再给html内容加样式。这里的显示屏我们用<input type="text" disabled id="show" value="" /> 加disabled语句使输入框不能输入内容。接下来就用JS语句来做(搞)东(事)西(情)。



    先获取到所有的元素,定义一个空数组下面用:

    var txt=document.getElementById("show");
                var obtn=document.getElementsByClassName("btn");
                var arr=[];



    再用for循环和点击函数来获取到所有的按钮:

    for(var i=0;i<obtn.length;i++){
    
                    obtn[i].onclick=function(){}    
    }

    此处建议大家做的时候经常用console.log()或者alert()来测试是否获取到按钮。


    接下来用if语句判断按钮添加事件:

    if(!isNaN(this.value)||this.value=="."){
                            if(txt.value.indexOf(".")== -1){
                                txt.value +=this.value;
                            }else if(this.value!="."){
                                    txt.value +=this.value;
                                }else{
                                if(txt.value.indexOf("+")!=-1||txt.value.indexOf("-")!=-1||txt.value.indexOf("*")!=-1||txt.value.indexOf("/")!=-1){
                                //alert(1);
                                arr[arr.length]=txt.value;
                                txt.value=this.value;
                                }
                            }
    
                        }

    判断是否为数字或者是  .  因为在一个数字里不可能出现多个小数点,比如125.54.1554.所以我们要判断当前显示的屏幕里有没有  .   语句为txt.value.indexOf(“.”)== -1把屏幕上显示的内容,即数字传入到定义好的数组里方便后面运算结果时使用。如果没有  .  则往屏幕上加  .  ,如果有则不加。截图如下:
    这里写图片描述


    if(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/"){
                                if(txt.value.indexOf("+")==-1||txt.value.indexOf("-")==-1||txt.value.indexOf("*")==-1||txt.value.indexOf("/")==-1){
                                    arr[arr.length]=txt.value;
                                    txt.value=this.value;
    
                                }
                        }

    再判断按钮是否为  +  -  *  /加减乘除运算符。同样因为屏幕上不能同时显示多个运算符所以进行判断,此处为了不显示之前的数字, txt.value=this.value;处不使用  +=   把运算符也传入到定义好的数组里方便后面运算结果时使用,结果如图:
    这里写图片描述


    else if(this.value=="="){
                            arr[arr.length]=txt.value;
                            var str="";
                            for(var a in arr){
                                str+=arr[a];
                            }
                            txt.value=eval(str);
                            //eval(),,专门用来计算表达式标签。
                        }

    判断如果按钮是  =  时定义一个空的字符串str,然后把之前存到数组arr里的内容传入到字符串里for(var a in arr){str+=arr[a];} 再用eval(专门用来计算表达式标签)标签将数组里的内容计算,得数传入屏幕显示。结果如图:
    这里写图片描述


     if(this.value=="C"){
                            txt.value="";
                            arr=[];
                        }else if(this.value=="DEL"){
                            txt.value = txt.value.substr(0, txt.value.length - 1);
                        }

    最后判断按钮是否为DEL或者C,DEL实现删除最后一个数字功能,与Backspace相似,C实现清空屏幕上所有的内容,较为简单。


    以上是所有的简易计算器代码内容。除了if语句也可以用switch语句 进行判断。但是我个人更喜欢用if。如下为switch例子:

    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>swith循环</title>
        </head>
        <body>
            <table>
                <tr>
                    <td>单价:</td>
                    <td><input type="text" id="danjia" value="100" disabled=""/></td>
                </tr>
                <tr>
                    <td>数量:</td>
                    <td><input type="text" id="num"/></td>
                </tr>
                <tr>
                    <td>支付方式:</td>
                    <td><select id="choose_pay">
                        <option>QQ支付</option>
                        <option>微信支付</option>
                        <option>支付宝支付</option>
                        <option>银行卡支付</option>
                    </select></td>
                </tr>
    
            </table>
            <button id="btn">
                    支付
            </button>
    
            <script type="text/javascript">
                window.onload=function(){
                    var obtn=document.getElementById("btn");
    
    
    
                    obtn.onclick=function(){
                    var much=document.getElementById("danjia").value;
                    var num=document.getElementById("num").value;
                    if(isNaN(num)){
                        alert("输入错误");
                    }
                    var pay=document.getElementById("choose_pay").value;
                    var zhekou=0;
                    switch(pay){
                        case "QQ支付":zhekou=0.9;break;
                        case "微信支付":zhekou=0.8;break;
                        case "支付宝支付":zhekou=0.85;break;
                        case "银行卡支付":zhekou=0.9;break;
                    }
                    //alert(num);
                    alert("您需要支付:"+much*num*zhekou+"元");
                    }
                }
            </script>
        </body>
    </html>
    

    结果:
    这里写图片描述
    当点击选择支付下拉框里支付方式时,可用到switch语句。

    switch(pay){
                        case "QQ支付":zhekou=0.9;break;
                        case "微信支付":zhekou=0.8;break;
                        case "支付宝支付":zhekou=0.85;break;
                        case "银行卡支付":zhekou=0.9;break;
                    }

    当选择QQ支付时,给zhekou变量赋值为0.9,………其他几种支付方式也都有定义好的折扣值。

    展开全文
  • JS 实实现现计计算算器器详详解解及及实实例例代代码码 ((一一))Javascript 实实现现计计算算器器::系列文章:JS 实现计算器详解及实例代码 (一)Javascript 实现计算器时间功能详解及实例 (二)小小型型JavaScript...
  • 计算商品总价示例代码,仅供参考,谢谢合作!
  • js判断鼠标位置是不是在某个div中

    千次阅读 2014-08-06 10:47:09
    解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠标并没有离开div,就不删除div,否则,删除之。OK,现在问题解决了。 就是找到该div左上角和右下角坐标,判断鼠标
  • JavaScript实现飞机大战,你来你也

    万次阅读 多人点赞 2021-08-03 22:55:14
    1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 引言: 之前我有用Java写过一个飞机大战,感觉挺受欢迎的,有的小伙伴想用Javasript写,我这次就按我的...
  • 将报告修改后JavaScript(ES5)文件的复杂度(代码,霍尔斯特德度量标准)如何变化。 使判断当前代码更改更容易-是增加还是删除复杂性? 小字 作者:Gleb Bahmutov:copyright:2015 许可证:麻省理工学院-对代码...
  • 关于购物车,想必在网上购物过的小哥哥小姐姐...进入正题:使用原生 “js计算购物车 商品及会员总价 首先看一下图要实现什么样的功能! 动态计算商选中的商品数量 数量的加减操作框 选中商品计算商品总价 与 ...
  • 解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之。OK,现在问题解决了。 就是找到该div左上角和右下角坐标,判断鼠标的...
  • js 一览分页,根据页数计算索引值
  • 3.Vue.js前端框架:条件判断与列表渲染

    千次阅读 热门讨论 2021-04-13 07:48:16
    Vue.js提供了多个指令来实现条件的判断,包括 v-if、v-else、v-else-if、v-show指令。下面分别进行介绍。 3.1.1 v-if指令 v-if 指令可以根据表达式的值来判断是否输出DOM元素及其包含的子元素。如果表达式的值为 ...
  • 在之前的博客“js-数组遍历方法的总结与辨析(强烈推荐every与some)”的“不完全循环”部分已经展示了用every与some方便地做条件判断、并处理部分元素的方法。不过用“循环”来概括数组内元素的处理感觉不太精确,...
  • 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TwoPoints<...script src="js/vue.js" type="text/javascript"><...
  • 本文实例讲述了js判断鼠标位置是否在某个div中的方法。分享给大家供大家参考,具体如下:div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 ...
  • JS数组(求平均数)(判断数组)

    千次阅读 2018-04-22 20:55:44
    &lt;script&gt; var a=[57,32,8,6,15,89,93,20];... //减去最大值(pop:删除数组最后一个元素)和最小值 (shift:删除数组第一个元素) var t=or.pop() + or.shift(); //设置一个变量值为0;...
  • JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,1与1.0是相同的,是同一个数。 根据国际标准 IEEE 754,JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的。 第1位:...
  • #node中常用的到的环境变量是NODE_ENV,首先查看是否存在 set NODE_ENV #如果不存在则添加环境变量 set NODE_ENV=production #环境变量追加值 set 变量名=%变量名%;...#某些时候需要删除环境变量 set NODE_ENV=
  • js 正则表达式匹配非法字符 示例(此示例验证通过) var pat=new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i"); var strTest = $("#testId").val(); if(pat.test(strTest)==true) { showMess("项目名称...
  • JS判断输入是否为整数的正则表达式

    万次阅读 2010-12-31 14:39:00
    评注:可以用来删除行首尾的空白字符 ( 包括空格、制表符、换页符等等 ) ,非常有用的表达式   10、 匹配 Email 地址的正则表达式: /w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)* 评注:表单验证时很...
  • //判断添加重复性 if ($("#price_item_"+id).length>0){ window.top.art.dialog.tips('请不要重复添加'); return; } //添加 htmlProduct = "<tr class=\"demoProduct\">" +...
  • 变量类型和计算 1. 变量类型 js变量类型分为基本类型(或者叫值类型)和引用类型。(按照存储方式区分)• 值类型 值类型:Number、String、Boolean、Null、Undefiend;这5种基本数据类型是按值访问的,可以操作保存...
  • javascript项目实战之原生js模拟淘宝购物车

    千次阅读 多人点赞 2015-10-05 23:14:00
    通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <title>...
  • 通过添加一个 span 到 body 容器中得到字体的实际宽度和高度 然后删除 span 标签 /** * 计算字体大小 */ function computeFontSize(str, size, family) { let spanDom = document.createElement("span")...
  • HTML+CSS+JS,20代码的贪吃蛇教程如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇重构</title> <style> body { display: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,262
精华内容 28,104
关键字:

js判断删除行后计算