- 博客(33)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
原创 前端开发过程中遇到的Ajax的同步异步执行问题
在一个for循环中调用一个函数,每次调用这个demo函数时就打印一下index的值,正常情况下来讲index的值肯定是0,1,2,3,4。因为Ajax请求成功后index的值+1了嘛,对吧,我想大部分人都是这样想的,但是最终结果却恰恰相反,控制台输出的结果是打印了5次0。
2023-06-19 19:02:38 291
原创 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 154
原创 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 156
原创 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 1575
原创 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 621 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 267
原创 js定时从缓存中读取数据
JavaScript设置定时从缓存中读取数据众所周知,前端开发中为了防止用户频繁点击某个查询数据按钮,一般会采用防抖或节流的方法,以此减轻服务器的压力。今天为大家分享另外一个方法,与防抖和节流的原理类似。从浏览器缓存中读取数据。用户第一次进入页面时,点击查询按钮从接口请求数据,此时将数据存入缓存中,没有任何问题。当用户后续点击时,判断距离上一次点击的时间差,假设为N秒,当超过N秒时,从接口请求数据,否则就从缓存中读取数据,以此来避免频繁的从接口请求数据,减轻服务器压力!以下为实例代码:<!
2022-03-19 20:14:30 1554
原创 js连接蓝牙打印机打印一维码和二维码
JavaScript使用原生JS(native.JS)连接蓝牙打印机,打印一维码、二维码使用说明:代码已经过测试,可正常使用测试蓝牙打印机为 商米(SUNMI)V2S plus打印机,此设备为一体机,与PDA连接打印出的一维码和二维码中包含汉字与字母,使用其他设备扫描时可能会出现乱码的情况,出现此现象的原因为扫描设备的配置太低,无法解析包含汉字的二维码,使用手机扫描时即可正常显示代码中的MAC地址一定要改为自己蓝牙打印机的蓝牙Mac地址<!DOCTYPE html><ht
2022-03-18 13:47:23 4117 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 7061
原创 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 3153
原创 原生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 708 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 110
原创 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 1005
原创 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 128
原创 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 144
原创 原生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 392
原创 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 1576
原创 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 121
原创 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 341
原创 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 110
原创 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 234
原创 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 2012 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 647 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 6008 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 5300
原创 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 1797 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 7866 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 2028
原创 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 632
原创 分享一些前端常用的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 1065
原创 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 2145
JavaScript向斑马打印机发送zpl指令
2022-05-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人