JS8. 数组排序
描述
请补全JavaScript代码，根据预设代码中的数组，实现以下功能：HTML/CSS/JavaScript 解法, 执行用时: 1692ms, 内存消耗: 77804KB, 提交时间: 2022-02-10
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <button class='up'>销量升序</button>\n <button class='down'>销量降序</button>\n <ul></ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var ul = document.querySelector('ul');\n var upbtn = document.querySelector('.up');\n var downbtn = document.querySelector('.down');\n // 补全代码\n for(let i =0;i<cups.length;i++){\n let li=document.createElement('li')\n li.innerHTML=cups[i].name\n ul.append(li)\n}\n var lis=document.querySelectorAll('li')\n upbtn.onclick=function (){\n cups.sort((a,b)=>a.sales-b.sales)\n for (let i = 0; i < cups.length; i++) {\n lis[i].innerHTML = cups[i].name;\n }\n }\n downbtn.onclick=function (){\n cups.sort((a,b)=>b.sales-a.sales)\n for (let i = 0; i < cups.length; i++) {\n lis[i].innerHTML = cups[i].name;\n }\n }\n \n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1765ms, 内存消耗: 77832KB, 提交时间: 2021-12-07
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <button class='up'>销量升序</button>\n <button class='down'>销量降序</button>\n <ul></ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var ul = document.querySelector('ul');\n var upbtn = document.querySelector('.up');\n var downbtn = document.querySelector('.down');\n // 补全代码\n for(var i=0;i<cups.length;i++){\n let li=document.createElement('li');\n li.innerHTML=cups[i].name;\n ul.append(li);\n }\n let lis=document.querySelectorAll('li');\n upbtn.onclick=function(){\n cups.sort(function(a,b){\n return a.sales-b.sales;\n })\n for(var i=0;i<cups.length;i++){\n lis[i].innerHTML=cups[i].name;\n }\n }\n downbtn.onclick=function(){\n cups.sort(function(a,b){\n return b.sales-a.sales;\n })\n for(var i=0;i<cups.length;i++){\n lis[i].innerHTML=cups[i].name;\n }\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1766ms, 内存消耗: 77772KB, 提交时间: 2021-12-05
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <button class='up'>销量升序</button>\n <button class='down'>销量降序</button>\n <ul></ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var ul = document.querySelector('ul');\n var upbtn = document.querySelector('.up');\n var downbtn = document.querySelector('.down');\n // 补全代码\n function _common(datas) {\n let str = ''\n for(let i=0; i<datas.length; i++) {\n str += `<li>${datas[i].name}</li>`\n }\n ul.innerHTML =str\n }\n upbtn.onclick = function() {\n let upCups = cups.sort(function(a,b) {\n return a.sales - b.sales\n })\n _common(upCups)\n }\n downbtn.onclick = function() {\n let downCups = cups.sort(function(a,b) {\n return b.sales - a.sales\n })\n _common(downCups)\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1766ms, 内存消耗: 77900KB, 提交时间: 2022-02-01
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <button class='up'>销量升序</button>\n <button class='down'>销量降序</button>\n <ul></ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var ul = document.querySelector('ul');\n var upbtn = document.querySelector('.up');\n var downbtn = document.querySelector('.down');\n // 补全代码\n function submit(){\n ul.innerHTML = '';\n for(let i=0;i<cups.length;i++){\n var li = document.createElement('li');\n li.innerText = cups[i].name;\n ul.appendChild(li);\n }\n }\n submit();\n \n upbtn.onclick = function(){\n cups.sort((a,b)=> {\n return a.sales - b.sales;\n })\n submit();\n }\n downbtn.onclick = function(){\n cups.sort((a,b)=> {\n return b.sales - a.sales;\n })\n submit();\n }\n \n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1767ms, 内存消耗: 77816KB, 提交时间: 2022-01-27
{"css":"","js":"","html":"\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <button class='up'>销量升序</button>\n <button class='down'>销量降序</button>\n <ul></ul>\n\n <script>\n var cups = [\n { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },\n { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },\n { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },\n { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }\n ]\n var ul = document.querySelector('ul');\n var upbtn = document.querySelector('.up');\n var downbtn = document.querySelector('.down');\n // 补全代码\n for(i = 0; i<cups.length ; i++){\n\t\t\t\tlet li = document.createElement('li');\n\t\t\t\tlet name = cups[i].name;\n\t\t\t\tli.innerHTML = name;\n\t\t\t\tul.appendChild(li);}\n\t\t\tfunction show(){\n\t\t\t\tlet lis = document.querySelectorAll('li');\n\t\t\t\tfor(i = 0; i<cups.length ; i++){\n\t\t\t\tlis[i].innerHTML = cups[i].name;\n\t\t\t\t}\n\t\t\t}\n\t\t\t\n\t\t\tshow()\n\t\t\tupbtn.onclick = function(){\n\t\t\tupSales();\n\t\t\tshow();\n\t\t\t}\n\t\t\tdownbtn.onclick = function(){\n\t\t\tdownSales();\n\t\t\tshow();\n\t\t\t}\n\t\t\tfunction upSales(){\n\t\t\t\tcups.sort((a,b)=>{return a.sales - b.sales})\n\t\t\t}\n\t\t\tfunction downSales(){\n\t\t\t\tcups.sort((a,b)=>{return b.sales - a.sales})\n\t\t\t}\n </script>\n </body>\n</html>","libs":[]}