JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果
更新時(shí)間：2021年08月19日 09:15:09 作者：supertianjia
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車的具體代碼，供大家參考，具體內(nèi)容如下
1.書寫input輸入框作為加減實(shí)現(xiàn)的效果。
2.加減按鈕用button按鈕來實(shí)現(xiàn)
3.利用js控制i的值作為輸入框中的值。
實(shí)現(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap 通過加減按鈕實(shí)現(xiàn)輸入框組功能
這篇文章主要介紹了bootstrap 輸入框組 通過加減按鈕來增加刪除內(nèi)嵌輸入框組,當(dāng)我點(diǎn)擊 + 按鈕時(shí)，會(huì)添加一行輸入框組；當(dāng)點(diǎn)擊 - 按鈕時(shí)，會(huì)刪除這一行輸入框組。具體實(shí)現(xiàn)代碼大家參考下本文2017-11-11
Javascript中的for in循環(huán)和hasOwnProperty結(jié)合使用
當(dāng)檢測(cè)某個(gè)對(duì)象是否擁有某個(gè)屬性時(shí)，hasOwnProperty 是唯一可以完成這一任務(wù)的方法，在 for in 循環(huán)時(shí)，建議增加 hasOwnProperty 進(jìn)行判斷，可以有效避免擴(kuò)展本地原型而引起的錯(cuò)誤2013-06-06
js實(shí)現(xiàn)點(diǎn)擊展開隱藏效果（實(shí)例代碼）
本篇文章小編給大家?guī)硪黄P(guān)于JS實(shí)現(xiàn)點(diǎn)擊展開點(diǎn)擊隱藏的效果代碼內(nèi)容，有興趣的朋友參考下。2018-09-09
JavaScript中的this基本問題實(shí)例小結(jié)
這篇文章主要介紹了JavaScript中的this基本問題,結(jié)合實(shí)例形式總結(jié)分析了JavaScript中this的功能、常見用法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JS hasOwnProperty()方法檢測(cè)一個(gè)屬性是否是對(duì)象的自有屬性的方法
這篇文章主要介紹了JS hasOwnProperty()方法檢測(cè)一個(gè)屬性是否是對(duì)象的自有屬性的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
javascript實(shí)現(xiàn)獲取一個(gè)日期段內(nèi)每天不同的價(jià)格(計(jì)算入住總價(jià)格)
這篇文章主要介紹了javascript實(shí)現(xiàn)獲取一個(gè)日期段內(nèi)每天不同的價(jià)格(計(jì)算入住總價(jià)格)的相關(guān)資料,需要的朋友可以參考下2018-02-02
本文主要介紹了JavaScript中的AJAX的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
Bootstrap每天必學(xué)之縮略圖與警示窗，對(duì)Bootstrap縮略圖與警示窗小編也了解的很少，希望通過這篇文章和大家更多的去學(xué)習(xí)Bootstrap縮略圖與警示窗，從中得到收獲。2015-11-11
這篇文章主要介紹了VCalendar的安裝和使用方法,包括如何通過官網(wǎng)地址引入API,并在項(xiàng)目中全局引入main.js文件,使用VCalendar可以實(shí)現(xiàn)日歷功能,需要的朋友可以參考下2025-01-01
Linux下編譯安裝php libevent擴(kuò)展實(shí)例
這篇文章主要介紹了Linux下編譯安裝php libevent擴(kuò)展實(shí)例,本文著重講解了編譯過程中一個(gè)錯(cuò)誤解決方法,需要的朋友可以參考下2015-02-02