Write native CSS and JavaScript

CSDN Q & A 2022-02-13 06:54:24 阅读数:567

write native css javascript
 

List of goods

goods 1

¥30

0

+

goods 2

¥50

0

+
shopping ⻋
¥0
Empty
Settlement
  Write native css, Complete page layout , The implementation effect is shown in the left figure . Write native JavaScript, Click the product plus sign , Make it correspond to count Add one , At the same time, change the amount of shopping cart , The implementation effect is shown in the right figure ![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/34980728452610.7658471380230297.png)



Take the answer :

img



Other answers 2:

What's the problem


Other answers 3:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { list-style:none; margin:0; padding:0; font-size:14px; } .warpper { width:400px; background:#ccc; } .warpper .title { padding:50px 0 5px 0; text-align:center; background:#f5bb28; font-size:19px; } .list li { display:flex; border-bottom: 1px solid rgb(155, 155, 155); } .list li .box { width:80px; height:80px; background:#c29422; } .list li .container { padding:10px 10px; box-sizing:border-box; width:320px; height:80px; /* background:red; */ } .list li .container .name{ font-size:20px; } .list li .container .price { position:relative; margin-top:8px; /* background:red; */ font-size:16px; } .list li .container .price .btn { width:20px; height:20px; background:#f5bb28; line-height:15px; text-align:center; font-size:24px; color:#fff; position:absolute; right:0px; top:-5px; cursor:pointer; } .list li .container .price .btn:hover { color:rgb(233, 232, 232); } .list li .container .price .count { width:15px; height:15px; background:#ccc; border-radius:50%; font-size:12px; background:red; color:#fff; line-height:13px; text-align:center; position:absolute; right:0px; top:-15px; display:none; } .warpper .shopping { margin-top:150px; background:#333; color:rgb(182, 182, 182); font-size:13px; height:40px; border-radius:20px; line-height:40px; } .warpper .shopping span:nth-of-type(1) { margin-left:3px; padding:0px 15px; display:inline-block; border-right:1px solid #fff; margin-right:10px; color:#fff; } .warpper .shopping span:nth-of-type(3) { margin-left:205px; cursor:pointer; } </style></head><body> <div class="warpper"> <div class="title"> List of goods </div> <ul class="list"> <li> <div class="box"></div> <div class="container"> <div class="name"> goods 1</div> <div class="price" name="0"> ¥30 <div class="btn">+</div> <div class="count">1</div> </div> </div> </li> <li> <div class="box"></div> <div class="container"> <div class="name"> goods 2</div> <div class="price" name="1"> ¥50 <div class="btn">+</div> <div class="count">1</div> </div> </div> </li> <li> <div class="box"></div> <div class="container"> <div class="name"> goods 3</div> <div class="price" name="2"> ¥40 <div class="btn">+</div> <div class="count">1</div> </div> </div> </li> </ul> <div class="shopping"> <span> The shopping cart </span> <span class="total">¥0</span> <span class="empty"> Empty </span> <span class="set"> Settlement </span> </div> </div> <script> let list = document.getElementsByClassName('list')[0] let eleCount = document.getElementsByClassName('count') let totalPrice = document.getElementsByClassName('total')[0] let empty = document.getElementsByClassName('empty')[0] let total = 0 // Create an array of certificates of deposit quantity , The length of the array is the number of product categories , // The subscript of the array is the same as that in the price tag name The value of corresponds to , let length = list.children.length let countArray = new Array(length) // Initializing the value of an array  for(let i = 0; i < countArray.length; i++) { countArray[i] = 0 } list.addEventListener('click',function (event) { e = event.target || window.event if (e.innerText == '+') { // obtain DOM Price element  let price = e.parentElement // Get price elements name Value , As an array index for storing single data  let i = parseInt(price.getAttribute('name')) countArray[i]++ // Get the corresponding purchase quantity  // Get the commodity quantity element  let count = price.lastElementChild count.style.display = 'block' count.innerHTML = countArray[i] // Calculate the total price of goods  n = parseInt(price.innerText.replace('¥','')) total += n totalPrice.innerHTML = `¥${total}` } },false) // Empty data  empty.addEventListener('click',function (){ for(let i = 0; i < countArray.length; i++) { countArray[i] = 0 eleCount[i].style.display = 'none' } totalPrice.innerHTML = '¥0' total = 0 },false) </script></body></html>
copyright:author[CSDN Q & A],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130654212712.html