当前位置：首页 > news >正文

js实践小案例

news 2026/8/25 14:20:58

弹框输入信息，页面自动渲染表格

<!DOCTYPEhtml><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{border-collapse:collapse;height:80px;margin:0auto;text-align:center;}table,th,td{border:1px solid black;}th{padding:5px 20px;}</style></head><body><script>letname=prompt('请输入商品名称：')letprice=+prompt('请输入商品价格：')letnum=+prompt('请输入商品数量：')letaddress=prompt('请输入地址：')lettotal=price*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-break

letnum1=+prompt('请输入第一个数：')letnum2=+prompt('请输入第二个数：')letopt=prompt('请输入一个运算符：')switch(opt){case'+':alert(`和为${num1+num2}`)break;case'-':alert(`和为${num1-num2}`)break;case'*':alert(`和为${num1*num2}`)break;case'/':alert(`和为${num1/num2}`)break;default:alert('请输入正确的运算符')}

爱我吗

lettext=prompt('你爱我吗')//注意这里 text != '爱' || text != 'yes' || text != 'love' 如果是或，只要有一个为真结果就为真，所以运算的结果永远为真while(text!=='爱'&&text!=='yes'&&text!=='love'){text=prompt('你爱我吗')//用新的text覆盖旧的}alert('我也爱你')

还有一种写法是

while(true){//循环条件永远为真，一直循环直到遇见breakletstr=prompt('你爱我吗')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(leti=1;i<=9;i++){for(letj=1;j<=i;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=['赵云','黄忠','关羽','张飞']letrandom=Math.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-N+1))+N}letrandom=getRandom(1,10)letflag=truefor(leti=0;i<3;i++){constnum=+prompt('请输入1-10的数字')if(num===random){alert('猜对了')flag=falsebreak}elseif(num<random){alert('猜小了')}else{alert('猜大了')}}//3次之后flag仍然是trueif(flag){alert('次数用完了')}

随机生成排列名单

<divclass="app"><strong>协会</strong><h1>一等奖：<span id="one">???</span></h1><h3>二等奖：<span id="two">???</span></h3><h5>三等奖：<span id="three">???</span></h5></div><script>constpersonArr=['张三','李四','王五','赵六','孙七']constrandom1=Math.floor(Math.random()*personArr.length)constone=document.querySelector('#one')one.innerHTML=personArr[random1]personArr.splice(random1,1)constrandom2=Math.floor(Math.random()*personArr.length)consttwo=document.querySelector('#two')two.innerHTML=personArr[random2]personArr.splice(random2,1)constrandom3=Math.floor(Math.random()*personArr.length)constthree=document.querySelector('#three')three.innerHTML=personArr[random3]personArr.splice(random3,1)</script>

快速滚动抽取名字

constarr=['嫦娥','貂蝉','大乔','小乔','朵朵']//开始：让名字快速滚动+随即索引,开启定时器//结束：让滚动停止，关闭定时器,删除名字，判断是否还可以抽conststart=document.querySelector('.start')constend=document.querySelector('.end')constask=document.querySelector('.ask')lettimeID=nullletrandom=0start.addEventListener('click',function(){timeID=setInterval(()=>{random=Math.floor(Math.random()*arr.length)ask.innerHTML=`名字是：${arr[random]}`},35)//写在start里，在开始前进行判断，防止数组为空if(arr.length===1){start.disabled=trueend.disabled=true}})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){letstr=''arr.forEach(item=>{const{price,name,picture}=item str+=`<div class="item"> <img src=${picture}alt="${item.name}"> <p class="name">${name}</p> <p class="price">${price}</p> </div>`})document.querySelector('.list').innerHTML=str}render(goodsList)//筛选document.querySelector('.filter').addEventListener('click',function(e){const{tagName,dataset}=e.targetif(tagName==='A'){// 移除所有 a 的 activedocument.querySelectorAll('.filter a').forEach(a=>{a.classList.remove('active')})letarr2=goodsListif(dataset.index==='1'){arr2=arr2.filter(item=>item.price>0&&item.price<100)}elseif(dataset.index==='2'){arr2=arr2.filter(item=>item.price>=100&&item.price<300)}elseif(dataset.index==='3'){arr2=arr2.filter(item=>item.price>=300)}render(arr2)}})