<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> tr, td { text-align: center; } </style> </head> <body> </body> <table border="1px" cellpadding="10px" style="border-collapse: collapse;"> <thead> <tr> <th>商品名称</th> <th>商品价格（单位为元）</th> <th>商品数量</th> <th>操作</th> </tr> </thead> <tbody id="goods"> <tr> <td>安分守己</td> <td>28</td> <td><button>-</button> 0 <button>+</button></td> <td><button>编辑</button><button>删除</button></td> </tr> </tbody> <footer id="total"> <tr> <td>总价：</td> <td id="gross"></td> <td>总数量：</td> <td id="qty"></td> </tr> </footer> </table> <button id="appends" onclick="adds(1,1)">添加</button> <div class="addition" style="display: none;"> <input class="box name" type="text" placeholder="请输入商品名称" /> <input class="box price" type="number" placeholder="请输入商品价格" /> <input class="box number" type="number" placeholder="请输入商品数量" /> <br /> <button onclick="additie(2,3)">提交</button> <button onclick="call(5)">取消</button> </div> <div class="edit" style="display: none;"> <input class="redact_names" type="text" placeholder="请编辑商品名称" /> <input class="redact_prices" type="number" placeholder="请编辑商品价格" /> <input class="redact_numbers" type="number" placeholder="请编辑商品数量" /> <br /> <button class="affixions" onclick="additie(2,4)">编辑</button> <button onclick="call(6)">取消</button> </div> <script src="./js/index.js"></script> </html>
[{ "id": "1", "name": "🍓🍕", "price": "28.00", "num": "0" }, { "id": "2", "name": "🍉🐝🐝", "price": "14.00", "num": "0" }, { "id": "3", "name": "🍔🍔🍔🍔🍔🍔🍔🍔🍔", "price": "5.00", "num": "0" }, { "id": "4", "name": "🥼", "price": "10.00", "num": "0" }]
< !DOCTYPE html > < html > < head > < meta charset = "utf-8" / > < title > < /title> < style > * { margin: 0; padding: 0; } .show { width: 70 % ; height: 500 px; margin - left: 20 px; margin - top: 20 px; overflow: hidden; } .print { display: flex; width: 800 % ; } .dots { display: flex; position: absolute; top: 480 px; left: 30 % ; } .dot { width: 15 px; height: 15 px; margin - left: 10 px; border - radius: 10 px; background - color: honeydew; } .print img { width: 100 % ; height: 500 px; object - fit: cover; } < /style> < /head> < body > < div class = "all" > < div class = "show" > < div class = "print" > < /div> < div class = "dots" > < div class = "dot" > < /div> < div class = "dot" > < /div> < div class = "dot" > < /div> < div class = "dot" > < /div> < div class = "dot" > < /div> < div class = "dot" > < /div> < div class = "dot" > < /div> < /div> < /div> < /div> < script > let data; let index = 0; let dot = document.getElementsByClassName('dots')[0]; let show = document.getElementsByClassName('show')[0]; let print = document.getElementsByClassName('print')[0]; let xhr = new XMLHttpRequest(); xhr.open('get', 'js/new_file.json', true); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { let text = xhr.responseText; console.log(text); data = JSON.parse(text); console.log(data); renderer(data); } }; function renderer(data) { let str = ''; let strs = ''; for (let i = 0; i < data.length; i++) { str += `<img src="${data[i].path}" alt="" />`; strs += `<div class="dot" onclick="control(${i})"></div>` }; str += `<img src="${data[0].path}" alt="" />` dot.innerHTML = strs; print.innerHTML = str; } console.log(show.offsetWidth); setInterval(function() { index++; print.style.transition = 'all 0.5s'; print.style.marginLeft = "-" + show.offsetWidth * index + 'px'; if (index == data.length) { setTimeout(function() { index = 0; print.style.marginLeft = "-" + show.offsetWidth * index + 'px'; print.style.transition = null; }, 700) } }, 3000) function control(index) { console.log(dot); }
