1.随机抽100个小方格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 500px; height: 500px; border: 4px solid #f00; margin: 50px auto; } .box div{ width: 18px; height: 18px; border: 1px solid #f00; float: left; } .active{ background-color: #f00; } </style> <script src="./tools.js"></script> </head> <body> <div class="box"> </div> <script> var oBox = document.querySelector('.box'); // 1. 创建小盒子,创建25*25个,625个 // 2. 625盒子放在box中 // dom操作是耗时操作 var str = ''; for(var i=1;i<=625;i++){ str += '<div></div>'; } oBox.innerHTML = str; var minBox = document.querySelectorAll('.box div'); // 2.1 给box添加点击事件 oBox.onclick = function(){ // 3. 生成100个随机数,范围 0-624之间,得到数组 var newArr = createDiv(); console.log(newArr); // 4. 遍历数组,找到对应的小方格的位置,添加类名 // 625个小盒子 // for(var i=0;i<minBox.length;i++){ // // 清除小盒子的红色背景 // minBox[i].style.backgroundColor = 'white'; // } // for(var i=0;i<newArr.length;i++){ // // 给新数组newArr的小盒子添加红色 // minBox[newArr[i]].style.backgroundColor = 'red'; // } for(var i=0;i<minBox.length;i++){ // 清除小盒子的红色背景 minBox[i].style.backgroundColor = 'white'; if(newArr.indexOf(i) >= 0){ minBox[i].style.backgroundColor = 'red'; } } } function createDiv(){ var temp = []; while(temp.length < 100){ var num = rand(0,624); if(temp.indexOf(num) == -1){ temp.push(num); } } return temp; } </script> </body> </html>
2.删除和添加
body> <ul id="ul"></ul> <input type="text" id="text"> <button id="add1">头部添加</button> <button id="add2">尾部添加</button> <button id="del1">头部删除</button> <button id="del2">尾部删除</button> </body> <script> // 1. 数据后端传递给我们,假设数组,遍历数组 var oUl = document.querySelector('#ul'); var add1 = document.querySelector('#add1'); var add2 = document.querySelector('#add2'); var del1 = document.querySelector('#del1'); var del2 = document.querySelector('#del2'); var myText = document.querySelector('#text'); var arr = ['张三','张三丰','章子怡','傻子张','张无忌','涨粉一']; // 渲染数据 show(); // 2. 给四个按钮点击事件 add1.onclick = function(){ // 3. 添加操作,还需要获取input框中的值 arr.unshift(myText.value); // 清空input框的数据 myText.value = ''; // 渲染数据 show(); } add2.onclick = function(){ // 3. 添加操作,还需要获取input框中的值 arr.push(myText.value); // 清空input框的数据 myText.value = ''; // 渲染数据 show(); } del1.onclick = function(){ // 3. 添加操作,还需要获取input框中的值 arr.shift(); // 渲染数据 show(); } del2.onclick = function(){ // 3. 添加操作,还需要获取input框中的值 arr.pop(); // 渲染数据 show(); } // 3. 添加操作,还需要获取input框中的值 // 4. 删除,就是删除数组中的值 // 5. 元素身上的删除,可以使用splice实现删除 // 封装了一个数据的渲染 function show(){ var str = ''; for(var i=0;i<arr.length;i++){ str += `<li>${arr[i]} <button>删除</button></li>`; } oUl.innerHTML = str; } </script>
3.输入时间 提示问候
var times = prompt("请输入时间："); function get(times) { let d= new Date(times); console.log(d); let hour = now.getHours(); if (hour >= 0 && hour < 12) { return "早上好"; } else if (hour >= 12 && hour < 14) { return "中午好"; } else if (hour >= 14 && hour < 18) { return "下午好"; } else if (hour >= 18 && hour < 24) { return "晚上好"; } else { return "凌晨好"; } } console.log(get(times))
4.倒计时
cd.onclick = function (){ function x(tim){ if(tim>0){ cf.innerHTML = tim+"秒"; setInterval(function(){ x(tim - 1); },1000); }else{ alert('结束') } } x(10); }
5.填充数据
<body> <ul id="ul"> <li> 汉堡店 <ul> <li>小吃系列</li> <ul> <li>炸鸡</li> <li>薯条</li> </ul> <li>汉堡系列</li> <ul> <li>炸鸡</li> <li>薯条</li> <li>薯条</li> </ul> <li>饮品系列</li> <ul> <li>炸鸡</li> <li>薯条</li> <li>薯条</li> <li>薯条</li> </ul> </ul> </li> </ul> </body> <script> var foodData = { code: 200, data: [ { "title": "汉堡店", "cont": [ { "title": "小吃系列", "foods": ['炸鸡翅', '薯条'] }, { "title": "汉堡系列", "foods": ['芝士汉堡', '牛肉汉堡', '鸡肉堡'] }, { "title": "饮品系列", "foods": ['果汁', '可乐', '咖啡'] } ] }, { "title": "牛排店", "cont": [ { "title": "牛排系列", "foods": ['菲力牛排', '战俘牛排'] }, { "title": "咖啡系列", "foods": ['冷萃咖啡', '椰奶咖啡', '卡布奇诺'] }, { "title": "沙拉系列", "foods": ['蔬菜沙拉', '金枪鱼沙拉', '水果沙拉'] } ] }, { "title": "牛", "cont": [ { "title": "小吃系列", "foods": ['菲力牛排', '战俘牛排'] }, { "title": "汉堡系列", "foods": ['冷萃咖啡', '椰奶咖啡', '卡布奇诺'] }, { "title": "饮品系列", "foods": ['蔬菜沙拉', '金枪鱼沙拉', '水果沙拉'] } ] } ] } var cd = foodData.data; console.log(foodData.data.title); var lis = ''; var lis1 = ''; for (var i = 0; i < cd.length; i++) { lis += ` <li> ${cd[i].title} ` for (var j = 0; j < foodData.data[i].cont.length; j++) { console.log(j); lis += ` <br> ${foodData.data[i].cont[j].title} </li> ` console.log(lis1); for (var k = 0; k < foodData.data[i].cont[j].foods.length; k++) { lis += `<ul> <li>${foodData.data[i].cont[j].foods[k]}</li> </ul> </ul> `} } } ul.innerHTML = lis; </script>
6.图片排序
<style> * { padding: 0; margin: 0; list-style: none; } body { background: #E8BC9A; } #box1 { width: 600px; margin: 10px auto; border: 5px solid #8B85E6; padding: 4px; overflow: hidden; } #box1 li { width: 140px; height: 160px; border: 2px solid #ccc; float: left; position: relative; margin-left: 5px; margin-top: 5px; } #box1 li img { width: 140px; height: 160px; } #box1 li span { position: absolute; top: 0; left: 0; border: 2px solid #fff; color: #fff; background: #000; font-size: 25px; width: 30px; height: 30px; line-height: 30px; text-align: center; } </style> </head> <body> <input type="button" value="从小到大" id="xiao"> <input type="button" value="从大到小" id="da"> <!-- <input type="button" value="乱七八糟"> --> <div id="box1"> <ul class="clear"> <li> <img src="img/1.jpg" alt=""><span>1</span> </li> <li> <img src="img/2.jpg" alt=""> <span>2</span> </li> <li> <img src="img/3.jpg" alt=""> <span>3</span> </li> <li> <img src="img/4.jpg" alt=""> <span>4</span> </li> <li> <img src="img/5.jpg" alt=""> <span>5</span> </li> <li> <img src="img/6.jpg" alt=""> <span>6</span> </li> <li> <img src="img/7.jpg" alt=""> <span>7</span> </li> <li> <img src="img/8.jpg" alt=""> <span>8</span> </li> </ul> </div> </body> <script> var arr=[1,2,3,4,5,6,7,8]; var imgs=document.querySelectorAll("ul img"); var spans=document.querySelectorAll("ul span"); console.log(imgs); console.log(spans[0]); xiao.onclick=function(){ arr.sort(function(a,b){ return a-b; }); for(var i=0;i<imgs.length;i++){ imgs[i].src = 'img/' + arr[i] + '.jpg'; spans[i].innerHTML=arr[i]; } } da.onclick=function(){ arr.sort(function(a,b){ return b-a; }); for(var i=0;i<imgs.length;i++){ imgs[i].src = 'img/' + arr[i] + '.jpg'; spans[i].innerHTML=arr[i]; } } </script>
7.跳动时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时间</title> <style> ul { margin: 200px auto 0; padding: 0; width: 400px; height: 70px; } li { list-style: none; position: relative; width: 50px; height: 70px; overflow: hidden; float: left; } li div { position: absolute; left: 0; top: 0; width: 50px; height: 140px; } li img { float: left; } li span { display: block; background: url('img/c.jpg'); width: 50px; height: 70px; } li.dian { background: url('img/b.jpg'); } li span.active { background: url('img/b.jpg'); } </style> </head> <body> <ul id="box"> <li> <div> <img src="img/0.jpg" /> <!-- <img src="img/0.jpg" /> --> </div> </li> <li> <div> <img src="img/0.jpg" /> <!-- <img src="img/0.jpg" /> --> </div> </li> <li class="dian"><span></span></li> <li> <div> <img src="img/0.jpg" /> <!-- <img src="img/0.jpg" /> --> </div> </li> <li> <div> <img src="img/0.jpg" /> <!-- <img src="img/0.jpg" /> --> </div> </li> <li class="dian"><span></span></li> <li> <div> <img src="img/0.jpg" /> <!-- <img src="img/0.jpg" /> --> </div> </li> <li> <div> <img src="img/0.jpg" /> <!-- <img src="img/0.jpg" /> --> </div> </li> </ul> <div style="position: absolute; top: -9999; "></div> </body> <script> s(); setInterval(s, 1000); function s() { var d = new Date(); var h = a(d.getHours()); var m = a(d.getMinutes()); var s = a(d.getSeconds()); console.log(h + '时' + m + '分' + s + '秒'); var arr = h + m + s; var li = document.querySelectorAll('#box div'); for (var i = 0; i < li.length; i++) { var imgs = li[i].querySelector('img'); console.log(imgs); imgs.src = 'img/' + arr[i] + '.jpg'; } } function a(tims) { if (tims < 10) { tims = '0' + tims; } else { tims = String(tims); } return tims; } </script> </html>
8.点名
<body> <div class="bz"> <div id="cf">可以</div> <button id="cd">开始</button> <button id="dc">暂停</button> </div> <script> var tim; cd.onclick = function (){ clearInterval(tim); var a=['小明','小红','小亮亮','小蓝','小朋友','神话']; tim=setInterval(function(){ var c=Math.floor(Math.random()*((a.length)+0)) cf.innerHTML = a[c];w },-10) } function show(){ clearInterval(tim); } dc.onclick= show; var myCf=document.querySelector('#cf') var myCd=document.querySelector('#cd'); var mydc=document.querySelector('#dc'); var tim; var nab=false; var a=['小明','小红','小亮亮','小蓝','小朋友','神话']; myCd.onclick=function(){ console.log(1); if(nab==false){ myCd.innerHTML='暂停' nab=true; tim=setInterval(function(){ let names=Math.floor(Math.random()*((a.length))) myCf.innerHTML=a[names] },10) }else{ myCd.innerHTML='开始' nab=false; clearInterval(tim) } }
9.自动生成日历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { text-align: center; } .box { margin: 0 auto; width: 880px; } .title { background: #ccc; } table { height: 200px; width: 200px; font-size: 12px; text-align: center; float: left; margin: 10px; font-family: arial; } </style> </head> <body> <script> var year = parseInt(prompt('输入年份：', '2022')); // 制作弹窗输入年份，默认为2022年 document.write(calendar(year));//调用函数生成指定年份的年历 function calendar(year){ var html = "<div class='box'>"; for(var m=0;m<=11;m++){ // 获取每月的第一天的星期 var w = new Date(year,m).getDay(); html += `<table> <tr class="title"><td colspan='7'>${year}年${m+1}月</td></tr> <tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr> `; // 获取每月的天数 var max = new Date(year,m,0).getDate(); // console.log(max); html += '<tr>' for(var d=1; d <= max; d++){ // html += '<td>' + d + '</td>'; //如果该月的第1天不是星期日，则填充空白 if (w && d == 1) { html += '<td colspan ="' + w + '"> </td>'; } html += '<td>' + d + '</td>'; if (new Date(year,m,d).getDay()==6) {//如果星期六不是该月的最后一天，则换行 html += '</tr><tr>'; } else if (d == max) {//该月的最后一天，闭合</tr>标签 html += '</tr>'; } } html += '</tr>' } html += '</table></div>'; return html; } </script> </body> </html>
8709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
