分类 JavaScript 下的文章 - 旭辉博客~关注网络发展，记录生活点滴

登录

标签搜索

公子初心

累计撰写 68 篇文章
累计收到 9 条评论

搜索到 6 篇与的结果

2024-05-14
JS实现无限级分类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let arr = [ { id: 1, 'auth_name': '商品管理', pid: 0 }, { id: 2, 'auth_name': '商品添加', pid: 1 }, { id: 3, 'auth_name': '商品列表', pid: 1 }, { id: 4, 'auth_name': '用户管理', pid: 0 }, { id: 5, 'auth_name': '用户添加', pid: 4 }, { id: 6, 'auth_name': '商品添加1', pid: 2 }, ] function buildTree(items) { // 创建一个空的映射，用于存放每个id对应的节点 const map = new Map(); // 遍历数组，建立id到节点的映射，并为每个节点初始化children数组 items.forEach(item => { map.set(item.id, { ...item, children: [] }); }); // 遍历数组，将每个节点添加到其父节点的children数组中 items.forEach(item => { // 如果当前节点不是根节点（pid不为0） if (item.pid !== 0) { // 从映射中获取父节点 const parent = map.get(item.pid); // 如果父节点存在，将当前节点添加到父节点的children数组中 if (parent) { parent.children.push(map.get(item.id)); } } }); // 过滤出根节点（pid为0）并返回 return Array.from(map.values()).filter(node => node.pid === 0); } const tree = buildTree(arr); console.log(tree); console.log(JSON.stringify(tree, null, 2)) </script> </body> </html>
- 2024年05月14日
- 9 阅读
- 0 评论
- 0 点赞
2024-02-18
使用XMLHttpRequest对象封装自己的axios函数 function myAxios(config){ return new Promise((resolve,reject)=>{ const xhr = new XMLHttpRequest() // 1.判断有params选项，携带查询参数 if(config.params){ // 2.使用URLSearchParams转换，并携带到url上 const paramsObj = new URLSearchParams(config.params) const queryString = paramsObj.toString() // 把查询参数字符串拼接在url?后面 config.url += `?${queryString}` } xhr.open(config.method||'GET',config.url) xhr.addEventListener('loadend',()=>{ if(xhr.status >=200 && xhr.status < 300){ resolve(JSON.parse(xhr.response)) }else{ reject(new Error(xhr.response)) } }) xhr.send() }) } myAxios({ url:'https://api-hmugo-web.itheima.net/api/public/v1/goods/detail', params:{ goods_id:1 } }).then(result=>{ console.log(result); })
- 2024年02月18日
- 23 阅读
- 0 评论
- 0 点赞
2023-12-11
jQuery代码实现购物车效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> <style> table { width: 600px; } td { height: 50px; text-align: center; } table,tr,td,th { border: 1px solid #ccc; } a { text-decoration: none; } .emptyCart{ display: none; width: 600px; height: 100px; border: 1px solid red; text-align: center; line-height: 100px; } </style> </head> <body>  <div class="emptyCart"> 购物车空空的哦~，去看看心仪的商品吧~ 去购物> </div> <table> <thead> <tr> <th><input type="checkbox" name="" class="checkAll"></th> <th>编号</th> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>商品小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="chk"></td> <td class="bianhao">1</td> <td>小米手机</td> <td>￥2.3</td> <td> <button class="decrement" data-index="1">-</button> <input type="text" class='num' value="1" style="width:30px" readonly> <button class="increment">+</button> </td> <td class="xiaoji">￥2.3</td> <td > <a href="javascript:;" class="del">删除</a> </td> </tr> <tr> <td><input type="checkbox" class="chk"></td> <td class="bianhao">2</td> <td>红米手机</td> <td>￥1</td> <td> <button class="decrement" data-index="1">-</button> <input type="text" class='num' value="4" style="width:30px"> <button class="increment">+</button> </td> <td class="xiaoji">￥4</td> <td > <a href="javascript:;" class="del">删除</a> </td> </tr> <tr> <td><input type="checkbox" class="chk"></td> <td class="bianhao">3</td> <td>大米手机</td> <td>￥3</td> <td> <button class="decrement">-</button> <input type="text" class='num' value="2" style="width:30px"> <button class="increment">+</button> </td> <td class="xiaoji">￥6</td> <td > <a href="javascript:;" class="del">删除</a> </td> </tr> </tbody> <tfoot> <tr> <td><input type="checkbox" name="" class="checkAll"></td> <td><a href="javascript:;" id="delSelect">删除选中的</a></td> <td><a href="javascript:;" id="clearCart">清空购物车</a></td> <td colspan="4"> 总计：共<span id="totalNums"></span>件商品总价： <span class="totalMoneys"></span> </td> </tr> </tfoot> </table> <script> // 7.打开页面，复选框被选中 $('input:checkbox').prop('checked',true); // 判断value为1的让减禁用 // $('.num').each(function(i,ele){ // if($(ele).val() == 1){ // $(this).prev().prop('disabled',true); // $(this).prev().css('cursor','not-allowed'); // }else{ // $(this).prev().prop('disabled',false); // $(this).prev().css('cursor','default'); // } // }); // 判断value为1的让减禁用 $('input[value=1]').prev().prop('disabled',true).css('cursor','not-allowed'); // $('input[value="1"]').prev().css('disabled',true); // 改变总件，总价 function changeTotalNumAndTotalPrice(){ // 计算被选中的商品的总件，总价 var sum = 0; var totalMoneys = 0; $('.chk:checked').each(function(){ sum += $(this).parents('tr').find('.num').val()-0; totalMoneys += $(this).parents('tr').find('.xiaoji').text().substr(1)-0; }); $('#totalNums').text(sum); $('.totalMoneys').text('￥'+ totalMoneys) // console.log(sum); // 1.遍历所有的数量 = 总件 // var sum = 0; // $('.num').each(function(i,ele){ // sum += $(ele).val()-0; // // console.log(i,$(ele).val()-0); // }); // // 修改总件 // $('#totalNums').text(sum); // // 2.遍历所有小计 = 总价 // var totalMoneys = 0; // $('.xiaoji').each(function(i,ele){ // totalMoneys += $(ele).text().substr(1)-0; // // console.log(i,$(ele).val()-0); // }); // // 总价 // $('.totalMoneys').text('￥'+ totalMoneys) } // 刚刚打开页面 changeTotalNumAndTotalPrice(); // 重置序号函数 function resetNum(){ $('.bianhao').each(function(i,ele){ // console.log(i,ele); $(this).text(i+1); }); } // 1.点击了购物车的全选按钮 $('.checkAll').change(function(){ $('.chk').prop('checked',$(this).prop('checked')); // 把全选的状态赋值给下面每个复选框 $('.checkAll').prop('checked',$(this).prop('checked'));// 另外一个checkAll根据当前checkAll的状态而改变 if($(this).prop('checked')){ changeTotalNumAndTotalPrice(); }else{ // 用户点击了取消全选件数为0 总价为0.00 $('#totalNums').text(0); $('.totalMoneys').text('￥0.00'); } }) // 2.点击了每个复选框，改变的全选 ,选中的长度 == 总长度，说明全选应该被选中了 $('.chk').change(function () { // console.log($('.chk').length); // 总长度 // console.log($('.chk:checked').length); // 被选中的长度 if($('.chk').length == $('.chk:checked').length){ $('.checkAll').prop('checked',true); // 说明全选应该被选中了 }else{ $('.checkAll').prop('checked',false); // 说明全选应该被取消了 } changeTotalNumAndTotalPrice(); }) // 3.商品数量改变 // 3.1 加 $('.increment').click(function(){ $(this).parents('tr').find('.chk').prop('checked',true); $(this).prevAll('.decrement').prop('disabled',false); $(this).prevAll('.decrement').css('cursor','default'); // 1.数量+1 获取数量 + 1 ,修改数量 var num = $(this).prev().val()-0; num++; $(this).prev().val(num); // 2.小计改变小计 = 数量 * 价格 ,赋值给小计 var price = $(this).parent().prev().text().substr(1)-0; // 截取 substr(1) var totalPrice = num * price; $(this).parent().next().text('￥'+totalPrice.toFixed(2)); // 3.改变总件 // 4.改变总价 changeTotalNumAndTotalPrice(); // console.log($(this)); if($('.chk').length == $('.chk:checked').length){ $('.checkAll').prop('checked',true); // 说明全选应该被选中了 }else{ $('.checkAll').prop('checked',false); // 说明全选应该被取消了 } }); // 3.2 减 $('.decrement').click(function(){ $(this).parents('tr').find('.chk').prop('checked',true); // 1.数量-1 获取数量 - 1 ,修改数量 var num = $(this).next().val()-0; // 减之前是几？就不让减了 num--; console.log(num); $(this).next().val(num); // 2.小计改变小计 = 数量 * 价格 ,赋值给小计 var price = $(this).parent().prev().text().substr(1)-0; // 截取 substr(1) var totalPrice = num * price; $(this).parent().next().text('￥'+totalPrice.toFixed(2)); // 3.改变总件 // 4.改变总价 changeTotalNumAndTotalPrice(); // console.log($(this)); if(num == 1){ // 禁用 $(this).prop('disabled',true); $(this).css('cursor','not-allowed'); } if($('.chk').length == $('.chk:checked').length){ $('.checkAll').prop('checked',true); // 说明全选应该被选中了 }else{ $('.checkAll').prop('checked',false); // 说明全选应该被取消了 } }); // 4.删除单个商品 $('.del').click(function(){ // 删除a ，爸爸的爸爸 // $(this).parent().parent().remove(); if(confirm('你确定要删除吗？')){ $(this).parents('tr').remove(); changeTotalNumAndTotalPrice(); // 删除后，获取所有的剩余商品的编号，重置 // console.log( $('.bianhao')); resetNum(); if($('tbody').children().length ===0){ $('table').remove(); $('.emptyCart').css('display','block'); } } // console.log($(this)); }) // 5.删除选中，点击了删除选中按钮，就删除选中的商品 $('#delSelect').click(function(){ if(confirm('你确定要删除吗？')){ $('.chk:checked').parents('tr').remove(); resetNum(); changeTotalNumAndTotalPrice(); // 我们怎么知道删完了呢？根据tbody的孩子的长度 console.log($('tbody').children()); if($('tbody').children().length ===0){ $('table').remove(); $('.emptyCart').css('display','block'); } } }) // 6.清空购物车 $('#clearCart').click(function(){ $('table').remove(); $('.emptyCart').css('display','block'); }); </script> </body> </html>
- 2023年12月11日
- 12 阅读
- 0 评论
- 0 点赞
2023-08-15
程序员考试实操题源码 1.1 html部分<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Drum Kit</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="keys"> <div data-key="65" class="key"> <kbd>A</kbd> <span class="sound">clap</span> </div> <div data-key="83" class="key"> <kbd>S</kbd> <span class="sound">hihat</span> </div> <div data-key="68" class="key"> <kbd>D</kbd> <span class="sound">kick</span> </div> <div data-key="70" class="key"> <kbd>F</kbd> <span class="sound">openhat</span> </div> <div data-key="71" class="key"> <kbd>G</kbd> <span class="sound">boom</span> </div> <div data-key="72" class="key"> <kbd>H</kbd> <span class="sound">ride</span> </div> <div data-key="74" class="key"> <kbd>J</kbd> <span class="sound">snare</span> </div> <div data-key="75" class="key"> <kbd>K</kbd> <span class="sound">tom</span> </div> <div data-key="76" class="key"> <kbd>L</kbd> <span class="sound">tink</span> </div> </div> <audio data-key="65" src="sounds/clap.wav"></audio> <audio data-key="83" src="sounds/hihat.wav"></audio> <audio data-key="68" src="sounds/kick.wav"></audio> <audio data-key="70" src="sounds/openhat.wav"></audio> <audio data-key="71" src="sounds/boom.wav"></audio> <audio data-key="72" src="sounds/ride.wav"></audio> <audio data-key="74" src="sounds/snare.wav"></audio> <audio data-key="75" src="sounds/tom.wav"></audio> <audio data-key="76" src="sounds/tink.wav"></audio> </body> </html>1.2 css部分html { font-size: 10px; background-size: cover; /* background-image: url(http://i.imgur.com/b9r5sEL.jpg); */ } body, html { margin: 0; padding: 0; font-family: sans-serif; } .keys { display: flex; flex: 1; min-height: 100vh; align-items: center; justify-content: center; } .key { border: .4rem solid black; border-radius: .5rem; margin: 1rem; font-size: 1.5rem; padding: 1rem .5rem; transition: all .07s ease; width: 10rem; text-align: center; color: white; background: rgba(0, 0, 0, 0.4); text-shadow: 0 0 .5rem black; } .playing { transform: scale(1.1); border-color: #ffc600; box-shadow: 0 0 1rem #ffc600; } kbd { display: block; font-size: 4rem; } .sound { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .1rem; color: #ffc600; } 1.3 js部分 <script> function removeTransition(e) { if (e.propertyName !== 'transform') return; e.target.classList.remove('playing'); } function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`div[data-key="${e.keyCode}"]`); if (!audio) return; key.classList.add('playing'); audio.currentTime = 0; audio.play(); } const keys = Array.from(document.querySelectorAll('.key')); keys.forEach(key => key.addEventListener('transitionend', removeTransition)); /** * 监听页面的keydown事件，触发playAudio函数。 */ window.addEventListener('keydown', playSound); </script> 2.点名器<!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> .box { width: 200px; height: 40px; border: 1px solid red; text-align: center; line-height: 40px; } </style> </head> <body> <div class="box"> 随机点名 </div> <button>开始</button> <script> let names = ["赵艳","林明","郭秀英","马军","王艳","方娟","林勇","廖明","程敏","曾秀英","马平","陆强","张军","崔涛","石秀英","武丽","谭刚","蒋秀英","杨杰","陈秀兰"] let button = document.querySelector("button") let box = document.querySelector(".box") let n = 3 let timer = null let index = 0 button.addEventListener("click",()=>{ timer = setInterval(show,50) setTimeout(stop,3000) }) function show(){ index = Math.floor(Math.random()*names.length) box.innerHTML = names[index] } function stop(){ clearInterval(timer) names.splice(names.indexOf(names[index]),1) console.log(names); } </script> </body> </html>
- 2023年08月15日
- 36 阅读
- 0 评论
- 0 点赞
2022-12-15
关于fetch,axios提交数据的一些问题 1.fetch的get请求1.1 fetch发起get请求。方式默认就是get请求，如果不指定请求方式那就是getfetch("http://localhost/test/action.php").then(function(data){ // console.log(data); return data.text() }).then(function(data){ console.log(typeof data) console.log(data) })● 通过data.text()获取的数据为字符串类型，也就是说还需要自己手动转成对象● 通过data = JSON.parse(data)fetch("http://localhost/test/action.php").then(function(data){ // console.log(data); return data.text() }).then(function(data){ data = JSON.parse(data); // 将json形式字符串转成对象 console.log(typeof data) console.log(data) })● 也可以通过返回 data.json() 直接返回json对象fetch("http://localhost/test/action.php?id=2&name=daming").then(function(data){ // console.log(data); return data.json(); //直接返回对象 }).then(function(data){ console.log(typeof data) console.log(data) })1.2 fetch发起get请求传递数据fetch("http://localhost/test/action.php?id=2&name=daming").then(function(data){ // console.log(data); return data.text() }).then(function(data){ data = JSON.parse(data); console.log(typeof data) console.log(data) })2.fetch 发起post请求fetch("http://localhost/test/action.php",{ method:"post", body:"id=3&name=laowang", headers:{"Content-Type":"application/x-www-form-urlencoded"} }).then(function(data){ // console.log(data); return data.json() }).then(function(data){ console.log(typeof data) console.log(data) })axios发起get请求3.1 不传递数据axios.get("http://localhost/test/action.php").then(function(res){ console.log(res); });3.2 传递数据axios.get("http://localhost/test/action.php",{ params:{ id:123, name:'hello' } }).then(res=>{ console.log(res.data); });4.axios发起post请求4.1 方法一保持默认请求头信息application/jsonaxios.post('http://localhost/test/action.php', {id:1,name:"laobai"}) .then(function(ret){ console.log(ret.data) })● 在后台代码不变的情况下，axios发起post请求默认的请求类型是 headers:{"Content-Type":"json"} ● PHP代码header("Access-Control-Allow-Origin: *"); // 允许任意域名发起的跨域请求 header("Access-Control-Allow-Methods:PUT,GET,POST,DELETE,OPTIONS"); // 允许这些常见的请求方式 header('Access-Control-Allow-Headers:x-requested-with,content-type'); // echo file_get_contents('php://input');4.2 方法二，设置头信息为 application/x-www-form-urlencoded前端代码axios.defaults.headers["content-type"] = "application/x-www-form-urlencoded"; axios.post("http://localhost/test/action.php",{id:123,name:'hello'} ).then(res=>{ console.log(res.data); });后台代码：<?php header("Access-Control-Allow-Origin: *"); // 允许任意域名发起的跨域请求 header("Access-Control-Allow-Methods:PUT,GET,POST,DELETE,OPTIONS"); // 允许这些常见的请求方式 echo file_get_contents('php://input'); ?>4.3 方法三，修改传递的参数，就自动修改了请求头信息为 application/x-www-form-urlencoded前端代码： var params = new URLSearchParams(); params.append('uname', 'zhangsan'); params.append('pwd', '111'); axios.post('http://localhost/test/action.php', params).then(function(ret){ console.log(ret.data) })后台代码<?php header("Access-Control-Allow-Origin: *"); // 允许任意域名发起的跨域请求 header("Access-Control-Allow-Methods:PUT,GET,POST,DELETE,OPTIONS"); // 允许这些常见的请求方式 header('Access-Control-Allow-Headers:x-requested-with,content-type'); // echo file_get_contents('php://input'); ?>
- 2022年12月15日
- 42 阅读
- 0 评论
- 0 点赞
2022-09-22
原生ajax封装，原生跨域请求jsonp封装原生ajax封装代码 function ajax(options) { var defaults = { type:'get', url:'', data:{}, headers:{ 'Content-type':'application/x-www/form-urlencoded' }, success:function(){}, error:function(){} } // 使用options对象中的属性覆盖defaults对象中的属性 Object.assign(defaults,options); var xhr = new XMLHttpRequest(); // get 请求 url = "http://localhost:3000?a=1&b=2;" var params = ''; for(var i in options.data){ params+=i+'='+defaults.data[i]+'&'; } // 去掉多余的&符号 params = params.substr(0,params.length-1); if(defaults.type == 'get'){ defaults.url = defaults.url + '?' + params; } // console.log(params); xhr.open(defaults.type,defaults.url) if(defaults.type == 'get'){ xhr.send(); }else{ var contentType = defaults.headers['Content-type']; xhr.setRequestHeader('Content-Type',contentType); if(contentType == 'application/json'){ xhr.send(JSON.stringify(defaults.data)); }else{ xhr.send(params); } } xhr.onload = function(){ // text/html; charset=utf-8 application/json; charset=utf-8 console.log(xhr.getResponseHeader('Content-Type')); var contentType = xhr.getResponseHeader('Content-Type'); var responseText = xhr.responseText; if(contentType.includes('application/json')){ responseText = JSON.parse(responseText) } // 当http状态码为200的时候，调用对用成功失败的情况 if(xhr.status == 200){ options.success(responseText,xhr); }else{ options.error(responseText,xhr); } } }原生jsonp跨域请求代码 var btn = document.querySelector("button"); btn.onclick = function(){ jsonp({ url:'http://localhost:3000/jsonp', data:{ name:'xiaoming', age:18 }, success:function(data){ console.log(data); } }); } // 封装jsonp函数 function jsonp(options){ // 1.创建script节点 var script = document.createElement('script'); var fn = 'fn'+Math.random().toString().replace('.',''); // 局部变量函数赋值给全局变量函数fn window[fn] = options.success; var params = ''; for(var i in options.data){ params +='&'+i+'='+options.data[i]; } // 2.为script标签设置属性 script.src = options.url + "?callback="+fn+params; document.body.appendChild(script) // 3.节点加载完毕删除节点 script.onload = function(){ script.remove(); } }
- 2022年09月22日
- 33 阅读
- 0 评论
- 0 点赞