web前端
关注
分享
扫一扫
web前端知识
向宇it
* QQ交流群：826534924
展开
-
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
在开发中，有时需要实现页面的局部打印功能，不打印页面上不需要的区域，< div > 内容1 < div > 内容2 < div > 内容3 < div id = " toPrint " style = " color : red " > 打印内容 < button onclick = " print() " > doPrint原创 2024-03-21 10:27:19 · 5545 阅读 · 0 评论 -
layui给radio添加checked属性不起作用
今天用layui做一个简单的radio单选框的选中出错,页面html标签明明已经添加了checked属性,但是没有起到选中效果经过百度,都是说需要加上 form.render(); 重新渲染一下就好了,试了一下还是不行,甚至报了个没找到form的错误,说明百度上大多数的人都是复制粘贴怪,并没有自己亲自测试后来发现,其实只要加上layui.form.render()就可以了如果您觉得...原创 2019-11-06 15:02:55 · 2634 阅读 · 6 评论 -
layui裁剪组件easyCropper使用样式错乱问题
问题截图解决原因官方给的资源文件cropper.css有问题,引入但是没有生效去修改cropper.css的所有cropper为easyCropper解决如果您觉得本篇对你有帮助,可以点关注,给个赞,支持一下,过程有遇到什么问题也欢迎评论私信,进行交流...原创 2021-01-29 11:02:29 · 368 阅读 · 2 评论 -
form提交如何获取同名name的value值
这是在学习过程中遇到的需求，平时挺少想到，感觉还挺重要的，所有专门写一篇文章来介绍如：<form action="" method="post"> <input type="text" name="sort" value="3"> <input type="text" name="sort" value="1"> <input type="...原创 2019-06-03 21:44:01 · 4910 阅读 · 2 评论 -
$(this)出错
只要你用jq,肯定会用到$(this)这里顺便提一下this和$(this)的区别:$(this)是jquery对象，this就是简单指当前元素。如果你直接使用$(this),会发现jq报错,百度很多人也是叫你直接使用,简直误人子弟使用的时候应该先**var that = $(this);**赋一下值如图:如果您觉得本篇对你有帮助,可以点关注,给个赞,支持一下,过程有遇到什么问题也欢...原创 2019-12-11 16:55:49 · 466 阅读 · 0 评论 -
css3简单的动画效果(@keyframes、@-webkit-keyframes、animation、-webkit-animation的使用)
1.定义动画 （1）@keyframes myfirst { from { background: #0000FF; //开始颜色 } to { background: #000000; //结束颜色 } } （2）@-webkit-keyframes myfirst { 0% { background: red; margin...原创 2019-06-27 13:33:39 · 1504 阅读 · 0 评论 -
jq获取多个相同name名的input框的value值
1.废话不多说，直接上代码<form method="post" action="index.php" enctype="multipart/form-data"> 问题1：<input type="text" name="question" /><br> 问题2：<input type="text" name="question" /><br> 问题3：<input type="text" name="questi原创 2020-07-28 10:11:34 · 2032 阅读 · 0 评论 -
PHP对百度UEditor富文本编辑器的简单使用
下载地址官网下载：http://ueditor.baidu.com/website/download.html然后解压就可以使用了分享一个将数据保存进数据库的方法1.首先前端index.html页面代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/T...原创 2019-06-19 22:44:13 · 2350 阅读 · 0 评论 -
layui 按class循环渲染多个时间控件
问题想做一个动态新增表但功能，但是你会发现原先定义好的时间控件没有效果了，变成了普通的input框，于是就需要重新渲染了1.页面效果1.html代码<div id="pay_content" > <label class="relative block"> <span class="color-green font-w7" required>缴费详情</span> <div class="notdata原创 2021-01-07 14:25:09 · 1052 阅读 · 4 评论 -
jq动态新增删除指定表单数据
实现效果：点击新增会新增一块表单数据，点击删除则隐藏对应表单数据页面效果html代码<label class="relative block"> <span class="color-green font-w7">缴费详情</span> <div class="notdata"> <div class="layui-col-md6"> <span>缴费金额<.原创 2021-01-07 09:46:21 · 436 阅读 · 0 评论 -
layui select下拉二级联动
以php语言为例html<div class="layui-form-item layui-row layui-col-space15"> <label class="layui-col-xs3 relative"> <span class="color-green">报考学校</span> <select class="layui-select" required name="school_id" lay-.原创 2021-01-21 16:20:59 · 1976 阅读 · 0 评论 -
php+ajax+jq实现简单的异步提交，传递参数到header
php+ajax+jq实现简单的异步提交，传递参数到header原创 2019-07-03 18:21:51 · 1577 阅读 · 1 评论 -
html/css兼容pc端和移动端，根据不同设备的宽度展示不同的样式，实现响应式布局（@media的使用）
什么是响应式布局实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式设计的步骤(1)Meta标签定义 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&...原创 2019-08-19 12:04:46 · 1359 阅读 · 0 评论 -
js 调起网页模式窗口window.open并实现窗口居中
html代码<button onclick="modal()"></button>js代码function modal() { var iHeight = 470; var iWidth = 370; //获得窗口的垂直位置 var iTop = (window.screenY || window.screenTop || 0) + (screen.height - iHeight-60) / 2; //获得窗口的水平位置 .原创 2022-02-11 14:42:40 · 1504 阅读 · 0 评论 -
jq/h5 实现实时获取大文件下载进度
jq/h5 实现实时获取大文件下载进度原创 2022-09-02 20:36:47 · 942 阅读 · 0 评论 -
js获取网页url?后的get参数
废话不多说，直接上代码function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pa原创 2022-02-11 14:49:46 · 573 阅读 · 0 评论 -
js/jq input框改变事件,光标失焦事件和按压enter事件
onchange: 在iput光标失焦切内容改变时执行Javascript代码οnkeypress: 在用户按下键盘按钮时执行Javascript代码1.html代码<input name="sort" onchange="change_sort(this)" οnkeypress="change_sort(this)" >2.jq代码function change_sort(that){ var sort = $(that).val(); $.post('.原创 2021-01-13 17:08:59 · 1492 阅读 · 0 评论 -
JQ常用操作，jq使用看这偏就够了
表示在当前选项卡添加active class属性，其他的删除active属性，达到切换的效果。siblings() 方法返回被选元素的所有同级元素。记得active定义css属性选中的样式。同级元素是共享相同父元素的元素。原创 2019-06-18 17:42:09 · 608 阅读 · 0 评论 -
jq简单的确认弹窗的使用
html代码<button onclick="empty()" style="color: red;">清空题库</button>jq代码<script>function empty(){ var r = confirm("确定要清空该用户的题库信息吗？清空后不可还原！"); if (r == true) { //alert('点击了确认'); var uid = $('input[name="uid"]').val(); $.get( 'A原创 2021-07-22 11:23:27 · 2394 阅读 · 0 评论 -
layui使用treeTable实现树形表格
1.地址https://fly.layui.com/extend/treeTable/#doc原创 2021-01-12 17:37:13 · 2906 阅读 · 14 评论 -
layui扩展xmSelect下拉多选使用实战
地址https://maplemei.gitee.io/xm-select/#/plugin/tree原创 2021-01-13 15:53:13 · 4291 阅读 · 0 评论 -
js定义长字符串变量处理
问题现在我有个很长的字符串变量要定义，会很长不宜阅读<script> var default_html = '<div class="layui-form-item" pane><label class="layui-form-label">第1期</label><div><div class="layui-col-md4"><input type="text" name="pay_content[price][]" req原创 2021-01-07 14:13:30 · 2474 阅读 · 0 评论 -
用js实现简单的页面倒计时
直接上代码var h = 1; //小时var maxtime = h * 60 * 60;//按秒计算，自己调整!//在网页切换的时候window对象也不会被销毁if(window.name == '') { window.name = maxtime; } else { maxtime = window.name;}function CountDown() { if(ma...原创 2019-07-03 16:31:43 · 3405 阅读 · 0 评论 -
HTML/CSS实现文字环绕图片布局
代码<p style="width:400px;"> <img src="https://img.kerry.top/FkgJLf5d2fOk2rrVIOINDo2gZNHt" align="right" width="120" hspace="5" vspace="1"> HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局H..原创 2021-03-12 16:23:00 · 2671 阅读 · 0 评论 -
layui switch使用详解
前景： 本文主要解决下面几大问题switch按钮无法点击问题设置默认选中传参关闭switch无传参问题绑定点击事件解析switch按钮无法点击问题代码<lable class="layui-form-item margin-top-20 block relative"> <span class="color-green margin-right-10 font-w7">个人提成</span> <br> <.原创 2021-08-30 14:11:56 · 3674 阅读 · 0 评论 -
配置meta -keywords -description关键字，实现百度搜索到自己的网站
keywords(关键字)说明：用于告诉搜索引擎，你网页的关键字。举例：<meta name="keywords" content="XX网，汽车，车主，评选">description(网站内容的描述)说明：用于告诉搜索引擎，你网站的主要内容。<meta name="description" content="XX千万车主评选">...原创 2020-12-03 13:50:12 · 1539 阅读 · 0 评论 -
原生js发起GET,POST请求调用接口，XMLHttpRequest的使用以及onreadystatechange没有返回值的问题
原生js发起GET,POST请求调用接口，XMLHttpRequest的使用以及onreadystatechange没有返回值的问题原创 2023-02-17 14:02:33 · 495 阅读 · 0 评论 -
jq vue js json转字符串 字符串转json
将JSON字符串为JS对象将JS对象转换为JSON字符串原创 2022-07-04 20:15:04 · 473 阅读 · 0 评论 -
layui官网关闭，爬下来的备用开发文档地址
废话不多说，直接上网站https://www.python87.com/layui/index.htm原创 2021-11-01 14:51:25 · 806 阅读 · 0 评论 -
html/css一些进阶知识点
一些常见css属性padding:margin:border:1px solid 颜色 //定义边框display:none; //隐藏不占位visibility:hidden; //隐藏占位 block; //转换为块元素 inline; //转换为行内元素 inline-block; //行内块元素float: left; //浮动c...原创 2019-06-17 20:21:50 · 427 阅读 · 0 评论 -
jquery实现input输入框实时输入触发事件代码（最全）
第一种办法$('#productName').bind('input propertychange', function() { console.log(123);});第二种办法//键盘事件$('input').keydown(function() { console.log(123);});第三种办法<input type="text" oninput="myFunction()"><script> function myFunction()原创 2021-01-11 16:54:35 · 10722 阅读 · 0 评论 -
JS常用知识点
【代码】JS常用知识点。原创 2019-06-18 17:41:02 · 317 阅读 · 0 评论 -
radio单选框动态切换
废话不多说直接上代码html代码<div class="layui-col-md10"> <input type="radio" name="pay_status" value="0" checked> <input type="radio" name="pay_status" value="1"> <input type="radio" name="pay_status" value="2"> <input原创 2021-01-12 11:32:32 · 1437 阅读 · 0 评论 -
基于layui，根据cropper修改的图片截取（剪裁）上传插件，适用于头像等图片上传
流程文档https://fly.layui.com/extend/croppers/#doc使用流程下载资源文件复制进自己的项目里,记得引入layui文件资源注意修改cropper文件夹为你自己的地址注意croppers.js中css地址注意上传到服务器成功后返回的是一个图片地址代码实现html代码<div class="layui-form-item"> <label class="layui-col-xs2 think-form-label">原创 2021-01-29 10:22:15 · 1184 阅读 · 2 评论 -
js动态点击放大缩小图片
图片点击后放大，点击放大图片回到列表界面html<img class="img img-toggle" src="xxx.jpg" alt="">css<style> .overlay { /*背景色,透明度*/ background-color: rgba(24 23 23 / 0.85); position: fixed; top: 0; left: 0; width:.原创 2022-03-10 15:41:30 · 2592 阅读 · 3 评论 -
checkbox不选中不传值问题解决
前言在使用layui时候,遇到个问题,我需要复选框选中传值传1,未选中的传0<input type="checkbox" name="avatarUrl_header" lay-skin="primary" title="头像"><input type="checkbox" name="nickName_header" lay-skin="primary" title="微信昵称">如果你直接简单的这样拿，你会发现你只能拿到选中的参数解决方法一：绑定事件，选中时赋值选原创 2021-02-02 09:37:09 · 2305 阅读 · 6 评论 -
toastr弹出提示窗口的使用
toastr是一个基于jQuery简单、漂亮的消息提示插件引入<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">参数说明参数配置.原创 2022-02-11 14:59:22 · 1249 阅读 · 0 评论 -
前端自定义弹出窗口
我这里给出两种方法一、通过js加css样式<body> <!-- 点击按钮，传递显示数据 --> <button id="btn" onclick="func('数据更新成功')">btn</button></body><script> // 创建一个div var layer=documen...原创 2019-06-19 20:39:32 · 8045 阅读 · 2 评论 -
layui 颜色选择器（colorpicker）的简单使用
官方文档：https://www.layui.com/doc/modules/colorpicker.html废话不多说，直接上代码html代码<div class="layui-form-item"> <label class="layui-form-label label-required">主题颜色</label> <div class="layui-input-block"> <div class="layu.原创 2021-09-03 16:59:45 · 1792 阅读 · 0 评论 -
input输入框禁止输入，传值和不传值的方式
不传值readonly属性<input type="text" name="input" value="0" readonly>传值disabled属性<input type="text" name="input" value="0" disabled="true">如果您觉得本篇对你有帮助,可以点关注,给个赞,支持一下,过程有遇到什么问题也欢迎评论私信,进行交流...原创 2021-01-12 11:22:57 · 1395 阅读 · 0 评论