前端技术
关注
分享
扫一扫
HTML、CSS、JS、JQ、AJAX、LayUi、Bootstrap、Echarts
下页、再停留
这个作者很懒，什么都没留下…
展开
-
【前端】Layui小功能收集整理。持续更新 ~
1、layui 鼠标悬浮提示文字2、关闭当前窗口并刷新父页面3、子iframe关闭/传值/刷新父页面4、Layui数据表格中时间戳转时间或转日期5、layui动态表格单击行事件6、Layui动态表格搜索7、Layui动态表格根据不同的状态进行判断8、点击图片，放大图片效果9、thinkphp5前端模板，检测是否包含某个字符串原创 2023-10-19 11:12:05 · 1993 阅读 · 0 评论
-
【前端】LayUI监听事件汇总
一、监听单选按钮事件二、监听下拉框事件三、监听复选框原创 2024-05-14 09:38:54 · 2524 阅读 · 0 评论 -
【前端】使用autocomplete实现输入框自动补全功能，同时获取输入框的值
使用autocomplete实现输入框自动补全功能，同时支持动态添加/删除输入框，并获取输入框的值。原创 2025-03-07 09:41:02 · 1084 阅读 · 0 评论 -
【前端】Jquery拍照，通过PHP将base64编码数据转换成PNG格式，并保存图像到本地
web端使用jquery调用摄像头拍照，并把base64编码转换成png格式图片，下载到本地。由于js不能指定图片存储的位置，所以需要把base64图像数据传到后台，由后台存储到指定位置。原创 2024-12-19 09:16:16 · 519 阅读 · 0 评论 -
【前端】CSS修改div滚动条样式
CSS修改div滚动条样式原创 2024-11-21 14:49:34 · 655 阅读 · 0 评论 -
【前端】JQ读取本地txt文本内容，并显示到页面上
有一个本地txt文件，把txt文件的内容按照原格式显示到页面上。有两种方法，方法一：利用JQ读取文件内容 ，并直接显示到页面上，不带格式；方法二：后端先读取txt文件，取出文本内容，返回给前端，在页面上显示，这种通过字符串替换可以达到原文本样式的效果。原创 2024-10-24 09:02:20 · 928 阅读 · 0 评论 -
【前端】JS实现禁止使用微信浏览器字体大小
由于微信浏览器自带可调节字体大小，而我们有些时候不想用户去调节微信的字体大小，避免页面布局错乱，所以就需要禁止用户调节微信字体大小。原创 2024-10-16 10:49:28 · 390 阅读 · 0 评论 -
【前端】JQ验证每个单选按钮是否已经选择
JQ验证每个单选按钮是否已经选择原创 2024-10-12 14:32:40 · 446 阅读 · 0 评论 -
【前端】Thinkphp前端模板输出检测是否含有某个字符串
使用thinkphp框架，在前端判断是否含有某个字符串原创 2024-09-13 11:28:32 · 281 阅读 · 0 评论 -
【前端】jq复制文本到剪贴板
【前端】jq复制文本到剪贴板原创 2024-09-06 09:51:21 · 1014 阅读 · 0 评论 -
【前端】CSS 给html页面添加水印
【前端】CSS 给html页面添加水印原创 2024-07-09 09:00:05 · 926 阅读 · 0 评论 -
【前端】CSS弹性布局 display-flex
一、display-flex弹性布局二、图片垂直水平居中原创 2024-05-20 08:55:01 · 320 阅读 · 0 评论 -
【JQ】加载中动画效果，带gif图片
【代码】【JQ】加载中动画效果，带gif图片。原创 2024-04-08 13:04:21 · 525 阅读 · 0 评论 -
【前端】JavaScript调用摄像头拍照和录制视频
点击开始录制 则开始录制视频 再点击结束录制 自动渲染录制的视频和下载。点击拍照 则自动下载。转载 2024-03-19 16:50:43 · 916 阅读 · 0 评论 -
【JQ】JS/JQ对日期、时间、星期处理操作的相关函数。持续更新 ~
一、获取当前日期时间二、时间戳转日期三、实时显示当前日期、时间、星期四、计算两个时间差 天 时 分 秒 毫秒原创 2024-02-01 10:47:12 · 703 阅读 · 0 评论 -
【Echarts】使用echarts和echarts-wordcloud生成词云图
【Echarts】使用echarts和echarts-wordcloud生成词云图原创 2023-12-26 09:00:42 · 2498 阅读 · 0 评论 -
【前端】Jquery UI +PHP 实现表格拖动排序
使用jquery ui库实现对表格拖拽排序，并且把排序保存到数据库中原创 2023-11-08 14:03:06 · 961 阅读 · 0 评论 -
【前端】JQ插件实现打印功能
下载三个js文件：jquery.jqprint-0.3.js、jquery-migrate-1.2.1.min.js、jquery-1.11.3.min.js，原创 2023-11-01 17:12:21 · 1394 阅读 · 0 评论 -
【JQ】jq时间戳转换成日期形式
【代码】jq时间戳转换成日期形式。原创 2023-10-10 15:02:06 · 862 阅读 · 0 评论 -
【前端】jquery获取data-*的属性值
通过jquery获取下面data-id的值。方法二：jquery data()方法。方法三：jquery attr()方法。方法一：dataset()方法。原创 2023-09-15 14:21:26 · 1967 阅读 · 0 评论 -
【前端】Layui静态表格自动换行
【代码】【前端】Layui静态表格自动换行。原创 2023-09-11 09:41:30 · 778 阅读 · 0 评论 -
【NKeditor】富文本编辑器上传图片
在items根据需要添加相应的功能source : 'HTML代码',preview : '预览',undo : '后退(Ctrl+Z)',redo : '前进(Ctrl+Y)',cut : '剪切(Ctrl+X)',copy : '复制(Ctrl+C)',paste : '粘贴(Ctrl+V)',plainpaste : '粘贴为无格式文本',wordpaste : '从Word粘贴',selectall : '全选(Ctrl+A)',原创 2023-09-05 17:03:39 · 374 阅读 · 0 评论 -
【前端】Layui动态数据表格拖动排序
目的：使用Layui的数据表格，拖动行进行排序。使用插件：layui-soul-table 和 Layui结合Layui并参看官方教程，写的比较详细页比较简单。实现效果：可以拖动行进行排序，可以搜索。原创 2023-09-01 17:30:53 · 6553 阅读 · 1 评论 -
【前端】JQ实时显示当前日期、时间、星期
【代码】【前端】JQ实时显示当前日期、时间、星期。原创 2023-08-30 14:15:33 · 1183 阅读 · 0 评论 -
【前端】 Layui点击图片实现放大、关闭效果
Layui点击图片实现放大、关闭效果原创 2023-08-30 09:55:16 · 1582 阅读 · 1 评论 -
【前端】JQ生成二维码
JQ生成二维码。原创 2023-08-11 09:43:35 · 1468 阅读 · 0 评论 -
JQ/CSS禁止浏览器复制粘贴、右键、F12
在JS里写以下内容可禁止右键和F12。在body里写下以下内容可禁止复制。原创 2023-06-20 14:24:52 · 731 阅读 · 0 评论 -
Jq 动态追加并获取多个form表单的数据
效果图需求：有的时候用户根据不同需要添加多个表单，但是不确定到底添加多少个，所以就需要使用jq实现动态添加多个表单了，也可以删除解决方法：系统默认给两个form表单，每一个表单都是一个form，而不是两行共用一个form，动态添加的时候点击左上角“添加”按钮，追加的是一个单独的form，每行都是一个form的好处是可以使用serialize序列化单独获取每个form表单的数据，这样前端容易获...原创 2020-04-07 16:00:15 · 1172 阅读 · 0 评论 -
php+js实现极验，拖动滑块验证码验证表单
现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。现在很多极验都是第三方的，也很多都是收费的。今天在这里给大家分享自己用原生php实现的一个极验的代码。用原生php的好处就是以后你要嵌套到什么框架，可以直接用核心代码，改一改就好了。极验拖动动画图代码文件截图代码实现html文件<...原创 2019-07-16 08:56:00 · 411 阅读 · 0 评论 -
jq 实现切换菜单选中状态
点击导航菜单，切换选中状态效果：思路：首先获取选中的URL，再通过正则判断是否相同，相同就加上相应的属性，不相同就去除相应的属性。html代码<div class="layui-container" style="padding: 0px; margin-top: 70px;"> <div class="layui-row footer-nav"...原创 2019-09-22 21:31:00 · 228 阅读 · 0 评论 -
thinkPHP+LayUI 懒加载实现
html<div class="layui-container" id="container"> </div>js，要引入layui.jslayui.use('flow', function() { var $ = layui.jquery; var flow = layui.flow; flow.load({ ...原创 2019-09-27 11:28:00 · 277 阅读 · 0 评论 -
Html引入百度富文本编辑器ueditor及自定义工具栏
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo，然后创建ueditor.html文件,引入百度编辑器，然后在html文件内引入，然后再用js实例化编辑器即可,代码如下：<!DOCTYPE html><html><head><title>百度编辑器&l...原创 2019-10-08 12:11:00 · 1676 阅读 · 0 评论 -
ThinkPHP5+WebSocket+MySQL实现聊天室
一、配置 开启socket组建，否则会报 Fatal error: Call to undefined function socket_create() 错误1、打开php.ini配置文件，搜索 extension=php_sockets.dll，把前面的‘；’分号删掉。修改之后重启服务。 注意：如果php版本多，一定要注意使用的哪个版本就要取修改哪个版本的php.ini文件，wamp开启...原创 2020-04-10 09:33:00 · 1237 阅读 · 0 评论 -
ajax实现异步加载ECharts图表数据
html代码<div class="layui-row" style="margin-top:0.5rem"> <div style="width:90%;margin:0rem auto 0.7rem auto;font-size:0.28rem"> <div style="background:#3385ff;color:#fff;bor...原创 2020-04-10 15:16:00 · 389 阅读 · 0 评论 -
JS简单验证
1.验证是否全为数字2.验证邮箱3验证手机号4.验证身份证号5.验证时间格式下面是代码，可直接用，有注释<html><meta charset="utf-8"><head> <title></title></head><script type="text/javascript">/...原创 2017-05-29 22:04:00 · 140 阅读 · 0 评论 -
html5 自适应屏幕分辨率大小
说明：①：H5自适应不同分辨率的设备，其实主要就一句<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />width=device-width 屏幕宽度；initial-scale=1 原始...原创 2017-08-15 16:29:00 · 2380 阅读 · 0 评论 -
使用ECharts画K线图
需引入echarts.js插件，开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。下载地址http://echarts.baidu.com/download.html下面是代码，注释很清楚，主要是js代码，可根据项目进行增删！配置项说明：http://echarts.baidu.com/option.html#title<!DOCTYPE html><h...原创 2017-08-17 10:44:00 · 896 阅读 · 0 评论 -
thinkphp5+qrcode生成二维码
1.下载二维码插件Phpqrcode，地址 https://sourceforge.net/projects/phpqrcode/files/，把下载的文件夹放到\thinkphp\vendor下2.在控制器里(也可在公共函数库里)添加函数qrcode(); public function qrcode() { vendor('phpqrcode.phpqrc...原创 2017-11-27 14:46:00 · 1033 阅读 · 0 评论 -
Thinkphp+ECharts生成柱状图
1.首先进ECharts官网下载echarts.js 点击下载，结合TP5讲解，主要代码在js里面，更多请到ECharts官网2.引进echarts.js<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>销售柱状图</title>...原创 2017-11-28 14:03:00 · 488 阅读 · 0 评论 -
Bootstrap+PHP实现多图上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充：使用bootstrap界面美观，可预览，可拖拽上传，可配合ajax异步或同步上传，下面是效果图：前端代码：fileinput.html<!DOCTYPE html><!-- release v4.1.8, copyright 2014 ...原创 2018-04-08 16:23:00 · 317 阅读 · 0 评论