JS實現(xiàn)簡單加減購物車效果
更新時間：2021年08月19日 09:15:09 作者：supertianjia
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單加減購物車效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)簡單加減購物車的具體代碼，供大家參考，具體內(nèi)容如下
1.書寫input輸入框作為加減實現(xiàn)的效果。
2.加減按鈕用button按鈕來實現(xiàn)
3.利用js控制i的值作為輸入框中的值。
實現(xiàn)的效果：
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.box{
border: red solid 1px;
height: 40px;
width: 200px;
margin: 200px auto;
text-align: center;
padding-top: 20px;
}
.box input{
width: 40px;
text-align: center;
}
#money{
border: none;
text-align: left;
margin-left: 2px;
}
ul{
list-style: none;
}
ul li{
display: block;
float: left;
vertical-align: middle;
}
</style>
<script>
window.onload = function(){
var plus = document.getElementById("plus");
var i = document.getElementById("text").value;
var subtract = document.getElementById("subtract");
var money = document.getElementById("money").value;
plus.onclick = function(){
i++;
document.getElementById("text").value = i;
document.getElementById("money").value = i*money;
}
subtract.onclick = function(){
if (i>0) {
i--;
document.getElementById("text").value = i;
document.getElementById("money").value = i*money;
} else{
i=0;
document.getElementById("text").value = i;
document.getElementById("money").value = i*money;
}
}
}
</script>
</head>
<body>
<ul class="box">
<li><button id="plus">+</button></li>
<li><input type="text" id="text" value="1"/></li>
<li><button id="subtract">-</button></li>
<li> ¥<input type="text" id="money" value="88"/></li>
</ul>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap 通過加減按鈕實現(xiàn)輸入框組功能
這篇文章主要介紹了bootstrap 輸入框組 通過加減按鈕來增加刪除內(nèi)嵌輸入框組,當(dāng)我點擊 + 按鈕時，會添加一行輸入框組；當(dāng)點擊 - 按鈕時，會刪除這一行輸入框組。具體實現(xiàn)代碼大家參考下本文2017-11-11
Javascript中的for in循環(huán)和hasOwnProperty結(jié)合使用
當(dāng)檢測某個對象是否擁有某個屬性時，hasOwnProperty 是唯一可以完成這一任務(wù)的方法，在 for in 循環(huán)時，建議增加 hasOwnProperty 進行判斷，可以有效避免擴展本地原型而引起的錯誤2013-06-06
本篇文章小編給大家?guī)硪黄P(guān)于JS實現(xiàn)點擊展開點擊隱藏的效果代碼內(nèi)容，有興趣的朋友參考下。2018-09-09
這篇文章主要介紹了JavaScript中的this基本問題,結(jié)合實例形式總結(jié)分析了JavaScript中this的功能、常見用法與操作注意事項,需要的朋友可以參考下2020-03-03
JS hasOwnProperty()方法檢測一個屬性是否是對象的自有屬性的方法
這篇文章主要介紹了JS hasOwnProperty()方法檢測一個屬性是否是對象的自有屬性的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
javascript實現(xiàn)獲取一個日期段內(nèi)每天不同的價格(計算入住總價格)
這篇文章主要介紹了javascript實現(xiàn)獲取一個日期段內(nèi)每天不同的價格(計算入住總價格)的相關(guān)資料,需要的朋友可以參考下2018-02-02
本文主要介紹了JavaScript中的AJAX的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
Bootstrap每天必學(xué)之縮略圖與警示窗，對Bootstrap縮略圖與警示窗小編也了解的很少，希望通過這篇文章和大家更多的去學(xué)習(xí)Bootstrap縮略圖與警示窗，從中得到收獲。2015-11-11
這篇文章主要介紹了VCalendar的安裝和使用方法,包括如何通過官網(wǎng)地址引入API,并在項目中全局引入main.js文件,使用VCalendar可以實現(xiàn)日歷功能,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Linux下編譯安裝php libevent擴展實例,本文著重講解了編譯過程中一個錯誤解決方法,需要的朋友可以參考下2015-02-02