前端demo
关注
分享
扫一扫
文章平均质量分 52
实战
.Tricia.
宁愿痛苦，不要麻木//
展开
-
【前端案例】原生js实现一个开关按钮，并记住用户选择
目标是创建一个开关按钮，并且能够记住用户的选择。主要步骤如下：使用CSS创建开关按钮的样式，包括按钮本身和滑块的样式。在HTML中创建一个开关按钮，包括一个隐藏的输入框和一个滑块。使用JavaScript获取之前的开关状态（如果存在），并设置开关的状态。当开关被点击时，使用JavaScript切换状态并保存到本地存储。 This is an InsCode Widget原创 2023-07-05 14:02:52 · 1345 阅读 · 0 评论 -
【JS运算】分组求和/平均值（reduce函数）
对于数组求和的问题，使用reduce函数能够最快的解决如果你还不会reduce函数，可以看这一篇： reduce函数的使用思路首先定义一个数组users，其中包含了多个对象，每个对象都有一个group属性和一个value属性。这个数组是用来进行分组求和和平均值计算的。Sum函数：用来存储分组求和的结果。使用了reduce方法，将数组中的元素进行迭代，并将它们按照group属性进行分组。在每次迭代中，回调函数会将上一次迭代的结果prev和当前元素{group, value}作为参数传原创 2023-04-14 14:49:07 · 1887 阅读 · 0 评论 -
js 对象数组的排序问题
一个对象数组，按照不同的属性进行排序。原创 2023-02-01 18:00:25 · 243 阅读 · 0 评论 -
【React】一个评论案例带你入门React组件基础
你不必一定成为玫瑰，路边的小花同样点缀大地🌼🌼🌼🌼🌼原创 2023-03-08 00:12:29 · 584 阅读 · 0 评论 -
【canvas】30行代码教你画一个刮刮乐
canvas入门原创 2023-02-18 20:56:53 · 861 阅读 · 0 评论 -
原生js实现图片懒加载
优化前端加载速度原创 2022-09-04 11:06:14 · 397 阅读 · 0 评论 -
vuex -- 数组对象的“双向数据绑定”
组件通讯--->vuex实现数组对象的“双向绑定”原创 2022-06-07 00:24:44 · 1115 阅读 · 0 评论 -
关于webpack5打包时生成LICENSE.txt文件的解决方案
问题最近在使用webpack5进行打包时，多出了一个LICENSE.txt的文件，查阅官网资料，找到了解决办法。官方：https://webpack.js.org/plugins/terser-webpack-plugin/如何解决？原因解决办法module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin({ extractCom原创 2022-05-21 15:08:58 · 3842 阅读 · 0 评论 -
node小案例 -- 歌词播放
需求使用node在终端实现歌词自动播放的功能。分析拿到一个歌词文件需要不同时间显示不同的文本，首先要分别拿到时间和文本选择正则表达式来提取时间和文本 /(\[\d{2}:\d{2}\.\d{2}\])(.*)/g 提取歌词文件内容fs文件系统的 readFile()将歌词转化为毫秒值将时间转化为时间戳，便于使用延时器实现歌词播放使用正则表达式分理出m,s,ms 然后转化为毫秒 /(\d{2}):(\d{2})\.(\d{2})/使用延时器播放歌词代码原创 2022-05-17 00:33:04 · 586 阅读 · 0 评论 -
JS案例——下班倒计时
要求：使用时间戳和定时器完成一个倒计时案例效果分析设置一个定时器，每隔一秒刷新一次定时器函数中显示剩余秒数转化为的时间1. 设置两个时间戳，一个是当前的，另一个是目标时间的2. 求出距离下班还有多少秒3. 获取时，分，秒。并将剩余秒数转化为的时间添加到页面中4. 修改细节时间到了关定时器修改当前时间代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /&原创 2022-04-17 16:09:16 · 3051 阅读 · 3 评论 -
【案例】js全选反选按钮的实现
效果图思路全选首先要使给全选按钮设置一个点击事件，在点击选中时可以使下面的每个多选按钮都选中。让每个多选按钮checked的状态都和全选按钮一致反选首先给每个多选按钮设置一个点击事件， 让每个多选按钮都选中时全选按钮也被选中可以先给全选按钮设置选中，然后判断一下如果有多选按钮没有被选中，则令全选按钮也不被选中实现文字改变使用三元运算符判断当前的先择状态，在根据状态给文字设置内容代码实现<!DOCTYPE html><html lang="en"><原创 2022-04-10 23:19:54 · 1715 阅读 · 0 评论 -
JS-使用定时器实现焦点图
需求定时器每秒切换一张图片以及图片上的内容效果代码<!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-scal原创 2022-04-06 09:59:35 · 289 阅读 · 2 评论 -
JS对象-遍历数组对象
需求请把下面数据中的对象打印出来：students = [{uid: 1, name: ‘小明’, age: 18, gender: ‘男’, hometown: ‘河北省’ },{uid: 2, name: ‘小红’, age: 19, gender: ‘女’, hometown: ‘河南省’ },{uid: 3, name: ‘小刚’, age: 17, gender: ‘男’, hometown: ‘山西省’ },{uid: 4, name: ‘小丽’, age: 18, gender:原创 2022-04-01 14:55:53 · 1627 阅读 · 0 评论 -
JS-转换时间
需求用户输入秒数，可以自动转换为时分秒。注意：时间不够两位数用0填充。分析小时： h = parseInt(总秒数 / 60 / 60 % 24)分钟： m = parseInt(总秒数 / 60 % 60)秒数: s = parseInt(总秒数 % 60) <script> function getTime(t) { let h = parseInt(t / 60 / 60 % 24) if(h < 1原创 2022-03-30 22:02:23 · 711 阅读 · 0 评论 -
JS-函数求最值
求数组中的最大值 function getMax(a) { let max = a[0] for (let i = 0; i <a.length ; i ++) { if(a[i] > max) { max = a[i] } } return max } let nu原创 2022-03-30 16:46:48 · 476 阅读 · 0 评论 -
原生JS-根据数据生成柱形图
需求：用户输入四个季度的数据，可以生成柱形图。效果图分析需要输入4次，所以可以把4个数据放到一个数组里面利用循环，弹出4次框，同时存到数组里面使用var div1 = document.getElementById('one');得到第一个div的id名 one。3. 使用div1.style.height = `${Data[0]}px`给类名为 one 的div添加高度。4.div1.innerHTML = Data[0] + '<br>' +原创 2022-03-29 21:18:53 · 2647 阅读 · 0 评论 -
图解-JS冒泡排序
冒泡排序 冒泡排序是一种简单的排序算法。 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数 列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。要求将数组 [2,3,1,4,5] 经过排序 [1,2,3,4,5]分析代码let a = [2,3,1,4,5] let t = 0 var c = 0 for(i = 0;i .原创 2022-03-28 00:16:12 · 412 阅读 · 0 评论 -
JS数组练习
数组元素求和求平均值 let sum = 0 let ave = 0 let a = [2,6,1,7,4] for(i = 0 ; i < 5 ; i ++ ) { sum += a[i] } ave = sum / 5 document.write(sum+'<br>') document.write(ave)数组求最大值和最小值 let原创 2022-03-27 23:16:03 · 469 阅读 · 0 评论 -
JS循环-for循环嵌套
打印5行5列星星效果图代码 // 打印出5行5列的星星 for(i = 1 ; i <= 5 ; i ++ ) { // 外层控制打印行 for(j = 1 ; j <= 5 ; j ++ ) { // 内层控制每行打印几个 document.write('⭐') } document.write('<br&原创 2022-03-27 22:12:24 · 1048 阅读 · 0 评论 -
JS循环练习-简易银行ATM
需求：用户可以选择存钱、取钱、查看余额和退出功能分析：1. 弹窗显示功能，将prompt写到循环里2. 只有用户点击退出时才能跳出循环3. ATM功能可以使用开关语句效果图：代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=原创 2022-03-26 11:48:06 · 788 阅读 · 0 评论