弹框输入信息页面自动渲染表格!DOCTYPEhtmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable{border-collapse:collapse;height:80px;margin:0auto;text-align:center;}table,th,td{border:1px solid black;}th{padding:5px 20px;}/style/headbodyscriptletnameprompt(请输入商品名称)letpriceprompt(请输入商品价格)letnumprompt(请输入商品数量)letaddressprompt(请输入地址)lettotalprice*num document.write(table caption表格信息/caption thead tr th商品名称/th th商品价格/th th商品数量/th th商品总价/th th收货地址/th /tr /thead tbody tr td${name}/td td${price}/td td${num}/td td${total}/td td${address}/td /tr /tbody /table)/script/body/html效果图如下简易计算器 case-breakletnum1prompt(请输入第一个数)letnum2prompt(请输入第二个数)letoptprompt(请输入一个运算符)switch(opt){case:alert(和为${num1num2})break;case-:alert(和为${num1-num2})break;case*:alert(和为${num1*num2})break;case/:alert(和为${num1/num2})break;default:alert(请输入正确的运算符)}爱我吗lettextprompt(你爱我吗)//注意这里 text ! 爱 || text ! yes || text ! love 如果是或只要有一个为真结果就为真所以运算的结果永远为真while(text!爱text!yestext!love){textprompt(你爱我吗)//用新的text覆盖旧的}alert(我也爱你)还有一种写法是while(true){//循环条件永远为真一直循环直到遇见breakletstrprompt(你爱我吗)if(str爱){break}}while(true)怎么理解只要没说停就一直重复执行里面的代码打印九九乘法表span{display:inline-block;padding:5px 10px;border:1px solid lightgreen;margin:4px;border-radius:5px;box-shadow:2px 2px 2px lightpink;text-align:center;}for(leti1;i9;i){for(letj1;ji;j){document.write(span${i}×${j}${i*j}/span)}document.write(br)}对象//k属性名 obj[k]属性值for(letkinobj){//console.log(k)//打印的是属性名字符串类型//console.log(obj.k)//字符串型相当于写了下面这行代码//console.log(obj.uname) //undefined// console.log(obj[属性名]) 查的另一种方式可以变成下面那一行//console.log(obj[k]) //获得属性名}随机点名letarr[赵云,黄忠,关羽,张飞]letrandomMath.floor(Math.random()*arr.length)document.write(arr[random])//不允许重复抽到过的删掉pop shift splice(起始位置删除几个)arr.splice(random,1)console.log(arr)猜数字游戏functiongetRandom(N,M){// 生成n到m的整数直接取整不是四舍五入returnMath.floor(Math.random()*(M-N1))N}letrandomgetRandom(1,10)letflagtruefor(leti0;i3;i){constnumprompt(请输入1-10的数字)if(numrandom){alert(猜对了)flagfalsebreak}elseif(numrandom){alert(猜小了)}else{alert(猜大了)}}//3次之后flag仍然是trueif(flag){alert(次数用完了)}随机生成排列名单divclassappstrong协会/strongh1一等奖span idone???/span/h1h3二等奖span idtwo???/span/h3h5三等奖span idthree???/span/h5/divscriptconstpersonArr[张三,李四,王五,赵六,孙七]constrandom1Math.floor(Math.random()*personArr.length)constonedocument.querySelector(#one)one.innerHTMLpersonArr[random1]personArr.splice(random1,1)constrandom2Math.floor(Math.random()*personArr.length)consttwodocument.querySelector(#two)two.innerHTMLpersonArr[random2]personArr.splice(random2,1)constrandom3Math.floor(Math.random()*personArr.length)constthreedocument.querySelector(#three)three.innerHTMLpersonArr[random3]personArr.splice(random3,1)/script快速滚动抽取名字constarr[嫦娥,貂蝉,大乔,小乔,朵朵]//开始让名字快速滚动随即索引,开启定时器//结束让滚动停止关闭定时器,删除名字判断是否还可以抽conststartdocument.querySelector(.start)constenddocument.querySelector(.end)constaskdocument.querySelector(.ask)lettimeIDnullletrandom0start.addEventListener(click,function(){timeIDsetInterval((){randomMath.floor(Math.random()*arr.length)ask.innerHTML名字是${arr[random]}},35)//写在start里在开始前进行判断防止数组为空if(arr.length1){start.disabledtrueend.disabledtrue}})end.addEventListener(click,function(){clearInterval(timeID)arr.splice(random,1)})style *{box-sizing:border-box;}body{margin:0;min-height:100vh;background:#ffffff;font-family:Microsoft YaHei,Arial,sans-serif;}.card{position:relative;width:710px;height:310px;margin:10px auto 0;border:1px solid #cccccc;box-shadow:0 2px 4px #999999;padding-top:10px;}h1{margin:0;text-align:center;font-size:24px;line-height:34px;color:#111111;}.question{position:absolute;top:96px;left:44px;margin:0;font-size:25px;color:#333333;}button{position:absolute;top:188px;width:126px;height:38px;border:1px solid #888888;border-radius:3px;background:#eeeeee;color:#222222;font-size:14px;cursor:pointer;}.start{left:178px;}.end{left:414px;}/style筛选不同价格区间的商品functionrender(arr){letstrarr.forEach(item{const{price,name,picture}item strdiv classitem img src${picture}alt${item.name} p classname${name}/p p classprice${price}/p /div})document.querySelector(.list).innerHTMLstr}render(goodsList)//筛选document.querySelector(.filter).addEventListener(click,function(e){const{tagName,dataset}e.targetif(tagNameA){// 移除所有 a 的 activedocument.querySelectorAll(.filter a).forEach(a{a.classList.remove(active)})letarr2goodsListif(dataset.index1){arr2arr2.filter(itemitem.price0item.price100)}elseif(dataset.index2){arr2arr2.filter(itemitem.price100item.price300)}elseif(dataset.index3){arr2arr2.filter(itemitem.price300)}render(arr2)}})效果图如下