js自動刷新價格
阿新 • • 發佈：2018-04-25
msg page name htm upd 一個 inner 收銀臺 失敗
在最近學習的經典模塊中有使用JavaScript實現購物車自動刷新商品數量和商品價格的功能；經過我的一番研究後把代碼整理出來；
由於這個例子中並沒有使用到數據庫，定義了一個數組作為數據源，代碼如下
<?php $shopcar=array( array("0","手機","20","100","98","9.8"), array("1","電腦","25","120","88","9"), array("2","汽車","19","200","180","9"), array("3","香蕉","10","2","1.8","9"), array("4","蘋果","5","5","4.8","9"), );?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="0" cellspacing="0" cellpadding="0" align="center"> <form id="myshopcar" name="myshopcar" method="post" action="#"> <tr> <td height="30" colspan="7" align="center" valign="middle" class="first">我的購物車</td> </tr> <tr> <td width="35" height="25" align="center" valign="middle" class="left"> </td> <td width="100" height="25" align="center"valign="middle" class="center">商品名稱</td> <td width="100" height="25" align="center" valign="middle" class="center">購買數量</td> <td width="100" height="25" align="center" valign="middle" class="center">市場價格</td> <td width="100" height="25" align="center" valign="middle" class="center">會員價格</td> <td width="100" height="25" align="center" valign="middle" class="center">折扣率</td> <td width="100" height="25" align="center" valign="middle" class="right">合計</td> </tr> <?php foreach ($shopcar as $key => $value) { ?> <tr> <td height="25" align="center" valign="middle" class="left"><input id="chk" name="chk[]" type="checkbox" value="<?php echo $value[0]; ?>"></td> <td height="25" align="center" valign="middle" class="center"><div id = "c_name<?php echo $value[0]; ?>"> <?php echo $value[1]; ?></div></td> <td height="25" align="center" valign="middle" class="center"> <input id="cnum<?php echo $value[0]; ?>" name="cnum<?php echo $value[0]; ?>" type="text" class="shorttxt" value="<?php echo $value[2]; ?>" onkeyup="cvp(<?php echo $value[0]; ?>,<?php echo $value[4]; ?>,<?php echo count($shopcar) ?>)"></td> <td height="25" align="center" valign="middle" class="center"><div id="m_price<?php echo $value[0]; ?>"> <?php echo $value[3]; ?></div></td> <td height="25" align="center" valign="middle" class="center"><div id="v_price<?php echo $value[0]; ?>"> <?php echo $value[4]; ?></div></td> <td height="25" align="center" valign="middle" class="center"><div id="fold<?php echo $value[0]; ?>"> <?php echo $value[5]; ?></div></td> <td height="25" align="center" valign="middle" class="right"><div id="total<?php echo $value[0]; ?>"> <?php echo $value[2]*$value[4]; ?></div></td> <tr> <?php } ?> <td height="25" colspan="3" align="left" valign="middle"> <a href="#" onclick="return alldel(myshopcar)">全選</a> <a href="#" onclick="return overdel(myshopcar);">反選</a> <input type="button" value="刪除選擇" class="btn" style="border-color: #FFFFFF;" onClick = ‘return del(myshopcar);‘> </td> <td height="25" align="center" valign="middle"><input id="cont" name="cont" type="button" class="btn" value="去數據庫修改" onclick="return conshop(myshopcar)" /></td> <td height="25" align="center" valign="middle"><input id="uid" name="uid" type="hidden" value="tang" ><input id="settle" name="settle" type="button" class="btn" value="去收銀臺" onclick="return formset(form)" /></td> <td height="25" colspan="2" align="right" valign="middle"><div id=‘sum‘>共計7622 元</div></td> </tr> </form> </table> </body> </html>
然後是最主要的JavaScript腳本，實現自動刷新的功能代碼如下：
實現商品刪除代碼：
<script>
/* 刪除記錄 */
function del(form){ if(!window.confirm(‘是否要刪除數據??‘)){ }else{ var leng = form.chk.length;//返回復選框的長度 if(leng==undefined){ if(!form.chk.checked){ alert(‘請選取要刪除數據!‘); }else{//如果只有一個復選框，而且處於選中狀態 rd = form.chk.value;//將復選框的value值直接賦給變量rd var url = ‘test.php?rd=‘+rd;//根據rd生成url xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = delnow;//調用delnow函數 xmlhttp.send(null); } }else{ //如果復選框為多個 var rd=new Array();//聲明數組 var j = 0; for( var i = 0; i < leng; i++){//循環檢查復選框狀態 if(form.chk[i].checked){ rd[j++] = form.chk[i].value;//將被選中的復選框的value值存到rd內 } } if(rd == ‘‘){ alert(‘請選取要刪除數據!‘); }else{ var url = "test.php?rd="+rd; alert(url); xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = delnow; xmlhttp.send(null); } } } return false; } function delnow(){ if(xmlhttp.readyState == 4&&xmlhttp.status == 200){ var msg = xmlhttp.responseText; if(msg != ‘1‘){ alert(‘刪除失敗‘+msg); }else{ alert(‘刪除成功‘); location=(‘?page_type=shopcar‘); } } } //全部選擇/取消 function alldel(form){ var leng = form.chk.length; if(leng==undefined){ if(!form.chk.checked) form.chk.checked=true; }else{ for( var i = 0; i < leng; i++) { if(!form.chk[i].checked) form.chk[i].checked = true; } } return false; } // 反選 function overdel(form){ var leng = form.chk.length; if(leng==undefined){ if(!form.chk.checked) form.chk.checked=true; else form.chk.checked=false; }else{ for( var i = 0; i < leng; i++) { if(!form.chk[i].checked) form.chk[i].checked = true; else form.chk[i].checked = false; } } return false; }
實現自動刷新總金額代碼：
//自動刷新總金額 // key商品id // vpr商品單價 // shoparr商品數量 function cvp(key,vpr,shoparr){ var n_pre = ‘total‘;//獲取div標簽的id前綴 var num = ‘cnum‘+key.toString();//根據key值生成文本域的id值 var total = n_pre+key.toString();//根據key值生成的div標簽的id值 var t_number = document.getElementById(num).value;//獲取輸入的商品數量 var ttl = t_number * vpr;//根據商品數量和單價，計算商品金額 document.getElementById(total).innerHTML = ttl;//計算商品總金額 var sm = 0; //所有商品總金額，初始為0 for(var i = 0; i < shoparr; i++){//根據商品種類數，循環得到其他商品金額 var aaa = document.getElementById(n_pre+i.toString()).innerText; sm += parseInt(aaa);//將所有商品金額累加 } document.getElementById(‘sum‘).innerHTML = ‘共計：‘+sm+‘ 元‘; } //更改商品數量 function conshop(form){ var n_pre = ‘cnum‘;//獲取商品數量文本域前綴 var lang = form.chk.length;//獲取復選框的數量 if(lang == undefined){//如果只有一個復選框，那麽將商品id和商品數量直接保存到變量中 var fst = form.chk.value; var snd = form.cnum0.value; }else{//否則將商品id和對應的商品數量保存到兩個相應數組中 var fst= new Array();//商品id數組 var snd = new Array();//商品數量數組 for(var i = 0; i < lang; i++){//循環獲取復選框的value值和商品數量文本框的value值 var nm = n_pre+i.toString(); var stmp = document.getElementById(nm).value; if(stmp == ‘‘ || isNaN(stmp)){ alert(‘不允許為空、必須為數字‘);//對商品數量文本框判斷 document.getElementById(nm).select(); return false; } snd[i] = stmp; var ftmp = form.chk[i].value; fst[i] = ftmp; } } var url = ‘test.php?fst=‘+fst+‘&snd=‘+snd; alert(url); xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = updatecar;//調用updatecar函數 xmlhttp.send(null); } function updatecar(){//對xmlhttp對象返回值進行處理 if(xmlhttp.readyState == 4){ var msg = xmlhttp.responseText; if(msg == ‘1‘){ location=‘index.php‘; }else{ alert(‘操作失敗‘+msg); } } }
實現顯示訂單代碼：
// 顯示訂單 function formset(form){ var uid = form.uid.value;//獲取訂單提交人的名稱 var n_pre = ‘cnum‘; //商品數量文本前綴 var lang = form.chk.length; //復選框個數 if(lang == undefined){ // 如果復選框只有一個 var fst = form.chk.value; //商品id var snd = form.cnum0.value; //購買數量 }else{// 如果復選框多個 var fst= new Array(); var snd = new Array(); for(var i = 0; i < lang; i++){// 循環獲取商品數量和商品id var nm = n_pre+i.toString(); var stmp = document.getElementById(nm).value; if(stmp == ‘‘ || isNaN(stmp)){ alert(‘不允許為空、必須為數字‘); document.getElementById(nm).select(); return false; } snd[i] = stmp; var ftmp = form.chk[i].value; fst[i] = ftmp; } } alert(‘test.php?uid=‘+uid+‘&fst=‘+fst+‘&snd=‘+snd); // open(‘test.php?uid=‘+uid+‘&fst=‘+fst+‘&snd=‘+snd,‘_blank‘,‘width=650 height=300‘,false); }
</script>
這裏實現數據處理頁面的代碼參考簡單購物車
如在實現商品刪除功能代碼如下
<?php session_start(); header ( "Content-type: text/html; charset=UTF-8" ); //設置文件編碼格式 require("system/system.inc.php"); //包含配置文件 /* xmlhttp返回參數 */ $reback = ‘0‘; /* 將傳過來的變量以逗號分割 */ $commid = explode(‘,‘,$_GET[‘rd‘]); /* 更新數據庫所需數組 */ $newshop = array(); /* 查找當前用戶 */ $sql = "select id,shopping from tb_user where name = ‘".$_SESSION[‘member‘]."‘"; $rst = $admindb->ExecSQL($sql,$conn); if($rst==false){ $reback = ‘2‘; }else{ /* 將shopping字段用@分割 */ if(!empty($rst[0][‘shopping‘])){ $tmpshop = array(); $shopping = explode(‘@‘,$rst[0][‘shopping‘]); foreach($shopping as $ky => $vl){ $tmp = explode(‘,‘,$vl); $boo = false; foreach($commid as $value){ if($value == $tmp[0]){ $boo = true; } } if(!$boo){ $tmpshop[$ky] = $vl; } } if(!empty($tmpshop)){ $update = "update tb_user set shopping=‘".implode(‘@‘,$tmpshop)."‘ where name = ‘".$_SESSION[‘member‘]."‘"; }else{ $update = "update tb_user set shopping=‘‘ where name = ‘".$_SESSION[‘member‘]."‘"; } $shop = $admindb->ExecSQL($update,$conn); if($shop){ $reback = 1; }else{ $reback = 3; } } } echo $reback; ?>
去數據庫修改代碼如下
<?php session_start(); header ( "Content-type: text/html; charset=UTF-8" ); //設置文件編碼格式 require("system/system.inc.php"); //包含配置文件 $sql = "select id,shopping from tb_user where name = ‘".$_SESSION[‘member‘]."‘"; $rst = $admindb->ExecSQL($sql,$conn);//返回熱二維數組 $reback = ‘0‘; $changecar = array(); if(isset($_GET[‘fst‘]) && isset($_GET[‘snd‘])){ $fst = $_GET[‘fst‘];//商品id $snd = $_GET[‘snd‘];//商品數量 $farr = explode(‘,‘,$fst); $sarr = explode(‘,‘,$snd); $upcar = array(); for($i = 0; $i < count($farr); $i++){ $upcar[$i] = $farr[$i].‘,‘.$sarr[$i]; } if(count($farr) > 1){ $update = "update tb_user set shopping=‘".implode(‘@‘,$upcar)."‘ where name = ‘".$_SESSION[‘member‘]."‘"; }else{ $update = "update tb_user set shopping=‘".$upcar[0]."‘ where name = ‘".$_SESSION[‘member‘]."‘"; } $shop = $admindb->ExecSQL($update,$conn); if($shop){ $reback = 1; }else{ $reback = 2; } } echo $reback; ?>
代碼下載鏈接 附上一句詩句：海到盡頭天作岸，山登絕頂我為峰。加油！
js自動刷新價格