- 博客(33)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 前端开发过程中遇到的Ajax的同步异步执行问题
在一个for循环中调用一个函数，每次调用这个demo函数时就打印一下index的值，正常情况下来讲index的值肯定是0,1，2,3，4。因为Ajax请求成功后index的值+1了嘛，对吧，我想大部分人都是这样想的，但是最终结果却恰恰相反，控制台输出的结果是打印了5次0。
2023-06-19 19:02:38
247
原创 canvas时钟
使用js与canvas绘制时钟<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit
2022-05-19 08:43:27
120
原创 vue父子组件传值、通信
vue父子组件传值、通信<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&
2022-04-28 15:55:54
118
原创 echarts根据数据范围显示不同的颜色
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title
2022-04-17 14:02:16
1527
原创 css实现超有趣的熊猫登录界面
利用css实现带有熊猫背景的登录界面，输入密码时熊猫会把输入框向上举起遮住眼睛效果图：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" co
2022-04-07 13:55:44
569
1
原创 js列表滚动
css+js实现列表滚动<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&
2022-04-06 13:50:35
230
原创 js定时从缓存中读取数据
JavaScript设置定时从缓存中读取数据众所周知，前端开发中为了防止用户频繁点击某个查询数据按钮，一般会采用防抖或节流的方法，以此减轻服务器的压力。今天为大家分享另外一个方法，与防抖和节流的原理类似。从浏览器缓存中读取数据。用户第一次进入页面时，点击查询按钮从接口请求数据，此时将数据存入缓存中，没有任何问题。当用户后续点击时，判断距离上一次点击的时间差，假设为N秒，当超过N秒时，从接口请求数据，否则就从缓存中读取数据，以此来避免频繁的从接口请求数据，减轻服务器压力！以下为实例代码：<!
2022-03-19 20:14:30
1511
原创 js连接蓝牙打印机打印一维码和二维码
JavaScript使用原生JS（native.JS）连接蓝牙打印机，打印一维码、二维码使用说明:代码已经过测试，可正常使用测试蓝牙打印机为 商米（SUNMI）V2S plus打印机，此设备为一体机，与PDA连接打印出的一维码和二维码中包含汉字与字母，使用其他设备扫描时可能会出现乱码的情况，出现此现象的原因为扫描设备的配置太低，无法解析包含汉字的二维码，使用手机扫描时即可正常显示代码中的MAC地址一定要改为自己蓝牙打印机的蓝牙Mac地址<!DOCTYPE html><ht
2022-03-18 13:47:23
3734
9
原创 使用Vue循环input输入框的取值问题
使用Vue循环input输入框的取值问题使用Vue循环生成input输入框时如何动态绑定v-model ?相信大家使用Vue动态循环生成input输入框时可能遇到过如下问题：Vue通过v-for可便捷的生成DOM结构，但循环input时会有一个v-model的属性，要通过v-model取值，便要为它动态绑定一个字段，而此时我们又不好在Vue的data属性中提前定义好input中v-model所需的字段，到这一步相信很多同学都放弃使用v-for循环生成input了，还是老老实实的使用js拼接字符串吧
2021-12-23 16:36:51
6932
原创 js做个随机点名的小游戏
用JavaScript做个随机点名的小游戏，用一个开关控制点名程序的开始与暂停<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content
2021-12-10 16:15:17
3107
原创 原生js获取设备的电池状态与网络状态
原生js获取设备的电池状态与网络状态<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
2021-11-17 14:52:17
665
2
原创 layui table编辑，搜索，分页
layui数据表格table实现单元格编辑功能<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2021-11-16 08:45:46
77
原创 layui表格拖动行实现排序
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>layui表格拖动行
2021-11-02 10:46:33
969
原创 layui表格使用
layui表格使用从接口请求到json数据后填入table内即可加载出layui数据表格，无需过多繁琐操作,支持表格内容搜索与分页<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi
2021-10-27 14:51:40
95
原创 JavaScript节流函数
JavaScript节流函数演示，在设定时间内只能执行一次某个函数，防止短时间内多次频繁触发执行<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
2021-10-13 08:54:13
116
原创 原生JS朗读文字，电脑播放声音
原生JavaScript朗读文本内容<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
2021-10-08 19:46:16
367
原创 JavaScript生成canvas印章
JavaScript生成印章，在浏览器中可保存为图片<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2021-08-28 10:36:40
1547
原创 JavaScript日期常用操作
JavaScript日期加减天数操作，计算两个日期之间相差天数，获取电脑本地当天日期废话不多说，直接上代码<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp
2021-07-31 15:48:30
91
原创 jQuery dataTable创建数据表格table
jQuery datatable数据表格模板，无需手动拼接字符串生成table表格请看以下代码：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl
2021-06-30 14:07:27
307
原创 layui导出Excel，laydate清除时间
layui插件导出Excel，功能强大<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
2021-06-16 14:29:33
74
原创 jQuery实现可编辑单元格
利用jQuery实现table表格内的单元格可编辑看以下代码<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg
2021-06-09 15:38:59
219
原创 JavaScript动态创建table表格
平时我们在用js去动态生成table表格的时候，都是一遍遍的去循环遍历数组中的字段，而在前端页面中表格多的时候就要写好多这样的代码，比较繁琐…使用如下方法，直接调用即可生成table<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
2021-06-08 16:08:04
1979
9
原创 JavaScript计算两个日期之间相差天数
JavaScript计算两个日期之间相差天数以下所用时间插件为laydate.js,可直接引用废话不多说，直接上代码!!!<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="
2021-06-05 10:37:59
601
2
原创 table表格固定表头
table表格内容过多时会出现滚动，若不固定表头的话，当滚动到下方时即看不见每一列所对应的标题，影响用户体验！废话不多说，直接上代码！！！<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
2021-06-04 14:12:45
5952
1
原创 echarts水平柱状图靠右侧Y轴显示
在使用echarts图表时，有时会遇到柱状图水平靠着右侧的Y轴显示的情况，此时通过设置inverse: true属性便可以实现废话不多说，上代码！<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
2021-05-28 19:46:53
5166
原创 JavaScript用逗号“，”分隔数字
JavaScript用逗号“，”分隔数字<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l
2021-05-27 16:08:59
1689
1
原创 echarts使用getZr()点击事件获取柱状图数据
echarts柱状图精确点击事件传参先上效果图！！！当柱状图数据较少的时候，直接点击柱子不好点击，使用getZr()此种方法可以点击柱子所在的这一列（阴影部分），即可拿到对应数据<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
2021-05-27 11:44:19
7666
3
原创 JavaScript导出CSV文件，简单js导出，无需库！
JavaScript根据json数据或table表格导出CSV文件<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=e
2021-05-26 16:14:21
1894
原创 jQuery给元素加tooltip提示框
jQuery给元素加tooltip提示框css库.just-tooltip { position: absolute; left: 0; top: 0; border-radius: 5px; background: #000; z-index: 9999}.just-tooltip .just-con { padding: 8px 10px; color: #fff}.just-tooltip .just-top,.just-tooltip .just-bottom,.
2021-05-26 15:42:16
597
原创 分享一些前端常用的js、css在线资源库，直接引用即可使用
分享一些前端常用的js、css在线资源库，直接引用即可使用注意：网址加载缓慢时可能与网络有关，请检查网络重试所有资源库都要在电脑有网的情况下才可使用<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me
2021-05-10 09:50:45
1016
原创 js动态拼接数据表格Table
js动态拼接数据表格table </tbody> </table> </div> <script> var html = "" for (var i = 0; i < 10; i++) { html += "<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + '小明' + "&
2021-01-28 16:16:06
2080
JavaScript向斑马打印机发送zpl指令
2022-05-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人