1. js實現頁面中的彈框,小米官網右上角購物車。大神指教
不用寫js事件,寫了js事件反而不好控制
購物車圖標和下面的下拉菜單是專在一個父元素屬當中的
添加樣式
.abc div{
display:none;
}
.abc:hover div{
display:block;
}
樣例參考附件即可,採納即可。
2. 以下代碼里,怎麼樣用JS增添一個刪除鍵,刪除購物車內對應的商品
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#div_idp{width:80px;height:30px;text-align:left;border:1pxsolid#000;line-height:30px;}
#div_idpbutton{float:right;height:30px;}
</style>
<scriptsrc="js/tool.js"></script>
<script>
window.onload=function(){
vardiv=document.getElementById("div_id");
varbutton=document.getElementsByTagName("button")
for(vari=0;i<button.length-1;i++){
button[i].onclick=function(){
alert("加入購物車成功");
varp=document.createElement("p");
varpContent=document.createTextNode(this.innerHTML);
p.appendChild(pContent);
div.appendChild(p);
vardelBtn=document.createElement("button");
vardelBtnContent=document.createTextNode("x");
delBtn.appendChild(delBtnContent);
p.appendChild(delBtn);
delBtn.onclick=function(){
div.removeChild(p);
}
//setCookie("購物",div.innerHTML,getDate(100))
}
}
varisTrue=false;
varbutton1=document.getElementById("button_id")
button1.onclick=function(){
if(isTrue==false){
button1.innerHTML="隱藏購物車"
isTrue=true;
/*if(getCookie("購物")!=undefined){
div.innerHTML=getCookie("購物");
}*/
div.style.display="block";
}elseif(isTrue){
button1.innerHTML="顯示購物車"
isTrue=false;
div.style.display="none";
/*if(getCookie("購物")!=undefined){
div.innerHTML=getCookie("購物");
div.style.display="none";
}*/
}
}
}
</script>
</head>
<body>
<button>商品1</button>
<button>商品2</button>
<button>商品3</button>
<button>商品4</button>
<button>商品5</button><br/><br/>
<buttonid="button_id">顯示購物車</button>
<divid="div_id"style="display:none;"></div>
</body>
</html>
3. 求一個JS代碼,就APP購物車的代碼,可以在html直接實現的
給樓主做了一個,JS實現商品計數的加和減,最少不能少於1,最多不大於99,代碼裡面有注釋,方面樓主查看和使用。
4. 請問js購物車代碼加在哪才能實現當顧客看到加入購物車的按鈕,點擊後出現彈出框呢
加在當前頁面的<script>的一個方法中,你點擊按鈕觸發這個方法就行
5. js購物車實現原理需要拿到該商品的id然後再請求一次嗎
購物車不只是js 啊也包括後台的不是那麼容易做到的啊
6. js對話框,我想做一個購物車結算功能,在結算的時候會花上幾秒鍾時間,這時候
稍等一下,我貼個demo代碼給你
這個是HTML頁面
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Demo</title>
<scripttype="text/javascript"src="
<styletype="text/css">
body{font-size:14px;}
.btn{background:#f22d00;color:#fff;display:inline-block;width:120px;height:50px;line-height:50px;text-align:center;font-family:'LantingheiSC','MicrosoftYahei';font-size:20px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;border-radius:2px;text-decoration:none;cursor:pointer;}
.mask{background:#000;opacity:0.5;height:50px;width:120px;position:absolute;left:8px;top:8px;color:#fff;line-height:50px;text-align:center;font-weight:bold;}
.maskimg{vertical-align:-3px;margin-right:5px}
</style>
</head>
<body>
<divclass="file-box">
<formmethod="post"id="demo_form">
<ahref="javascript:;"class="btn"id="J_Go"><span>結 算</span></a>
</form>
</div>
</body>
<scripttype="text/javascript">
$(document).ready(function(){
$('#J_Go').click(function(){
//修改結算按鈕的背景顏色
$('#J_Go').css('background','#ccc');
//添加遮罩效果
varhtml='<spanclass="mask">';
html+='<imgsrc="loading.gif">請稍候...</san>';
$('#demo_form').append(html);
//提交表單
varurl='test.php';
$.post(url,{},function(r){
if(r.status==1){
//提交表單後返回成功,則去除遮罩
$('.mask').remove();
//修改結算按鈕顏色
$('#J_Go').css('background','#f22d00');
}else{
alert(r.info);
}
},'json');
});
returnfalse;
});
</script>
</html>
這個是PHP頁面
<?php
$info['status']=1;
$info['info']='操作成功!';
exit(json_encode($info));
?>
這是效果圖示
本想上傳個附件的,一個完整的實例Demo的,但是現在才三級,不支持上傳附件。
若有任何疑問,歡迎追問!
7. 購物車功能 點擊一個 checkbox 將這一行的所有數據返回到後端 其中js寫的商品數量和商品價格總和怎麼傳
foreach有varStatus屬性,這個就一個行id,在input上設置id,然後通過id獲取他的值,在網後端發送數據不就行了
8. 前端用js如何實現購物車功能,如圖那樣的效果
這是需要多個方法才能完成的
1,需要動態添加商品那一條顯示的function
2,個數那個需要一個增加減少的function
3, 需要個統計總數量的
4,需要一個檢測checkbox的
你做到什麼程度了
9. 求助js購物車代碼!要能點擊 添加按鈕 就直接在購物車顯示出來!可以修改數量!
<script language='javascript'>
function checkSum()
{
var sum = 0;
for(var i=0;i<document.form1.elements["writer"].length;i++)
{
if(document.form1.elements["writer"][i].checked)
{
sum = sum +parseInt(document.form1.elements["writer"][i].value);
}
}
totalprice.innerText = sum +" 元";
}
</script>
<form method=post name=form1>
<input type="checkbox" name=writer value="34" onclick="checkSum()">韓國耳飾(34元)<br>
<input type="checkbox" name=writer value="46" onclick="checkSum()">純銀吊墜tc34(46元)<br>
<input type="checkbox" name=writer value="30" onclick="checkSum()">黃鶯手鐲ta345(30元)<br>
<input type="checkbox" name=writer value="40" onclick="checkSum()">翡翠玉鐲1346(40元)<br>
<input type="checkbox" name=writer value="50" onclick="checkSum()">天涯耳飾1233(50元)<br>
<br>
總價為:<span id="totalprice">0 元</span>
</form>
10. 淘寶購物車界面的js實現
購物車不只是js 啊
也包括後台的
不是那麼容易做到的啊