HTML
bluelotos893
谦谦君子,温润如玉。
展开
-
根据设计稿设置rem大小,elementUI px转rem
根据设计稿设置rem大小,px转rem原创 2022-10-07 20:39:34 · 2608 阅读 · 0 评论 -
table固定表头
设置table表头固定原创 2022-09-01 13:03:17 · 7580 阅读 · 1 评论 -
前端汉字首拼模糊查询提示jQuery插件
适用场景:用户需要在指定的列表中选择或者搜索后选择。<span class="stk-autocomplate-wrap" id="stk-autocomplate-wrap-7925e575e6e8"> <input id="sk_operator_id2" class="autocomplate-ipt" readonly/> <i class="arrow-i"> </i> <i class="close-btn"> </i原创 2020-12-15 09:23:23 · 413 阅读 · 0 评论 -
判断元素是否在页面当前视口中
var viewH = document.documentElement.clientHeight;//视口总高度 var scrollHeight = document.documentElement.scrollHeight;//文档总高度(包含滚动区域内容) function lazyload() { var nodes = document.querySelectorAll('.fadeInUp'); Array.prototype.forEach.call(n.原创 2020-11-17 10:57:57 · 907 阅读 · 0 评论 -
html2canvas使用心得
需求:微信中将一些动态内容生成一张图片,用户可保存html2canvas是比较成熟的一个插件,于是用了起来,下面是使用中遇到的一些问题总结:图片模糊:使用background-image的方式会引起模糊,直接使用img就解决了选择版本:1.0.0-rc.4(iOS选择1.0.0-rc.5会有问题,图片显示不出来)...原创 2020-07-06 19:53:40 · 281 阅读 · 0 评论 -
前端分页
发现一款前端分页插件jQuery分页插件sPage,简洁大方易用,推荐给大家啦。作者jq22 && jq3309.spage-total{display: inline-block;margin-right: 20px;line-height: 35px;color: #666;font-size:14px;}.spage-number{display: inline-block;color: #666;font-size:14px;}.spage-number button{posi原创 2020-06-03 17:31:52 · 213 阅读 · 0 评论 -
table 每行留一些空隙的border处理
需求是实现下面的效果这里推荐一篇关于CSS选择器不错的文章 – 使用这些 CSS 属性选择器来提高前端开发效率!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...原创 2019-05-07 22:51:15 · 1236 阅读 · 0 评论 -
设置iframe窗口不出现滚动条
iframe窗口在多数浏览器中的默认高度是150px,所以在不处理的情况下出现滚动条是大概率事件,我们需要在涉及DOM变化的地方加上一个获取实时内容高度的事件,然后再设置到iframe上。 //假定iframe的ID为iframe_name function setIframeHeight(){ var contentHeight = document.body.scrollHeig...原创 2019-07-25 09:07:48 · 3885 阅读 · 0 评论 -
前端打印时不显示背景和border颜色的CSS设置
元素有设置背景色,但是打印时不显示背景色,在背景色设置后面加上 !importantborder的颜色不显示,子元素的border颜色设置成和父元素不一样就显示了(很奇葩的现象,但是管用)。<style media=print type="text/css"> div.mark-target-a{background: #E73535 !important;} div....原创 2019-07-25 15:21:16 · 5720 阅读 · 1 评论 -
css自定义单选框、复选框
span.pg-option-item-radio,span.pg-option-item-checkbox { position: relative; display: inline-block; margin: 3px 0; min-width: 100px; cursor: default; line-height: 1.5; padding: 0 5px 0 19px; ...原创 2019-08-23 16:52:30 · 265 阅读 · 0 评论 -
前端table导出为Excel
参考网址:添加链接描述//base64转码 var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); }; //替换table数据和worksheet名字 var format = function (s, c) { return...原创 2019-08-17 11:23:12 · 649 阅读 · 0 评论 -
Chrome浏览器表头打印相关
表头打印重叠:需要每页都有相同的表头,使用table的thead就可以实现,但是有时候会出现表头内容和正文在顶部重叠,也不知道是什么原因,原来是打印的table外面又包裹了一个div,且设置了宽度为A4纸大小210mm,把这个宽度属性去掉后就正常了。多一条边框:当table、tr、td都设置了边框,有时候跨页的时候上一页的底部可能会多一条边框,把table的border去掉就正常了。...原创 2018-11-19 09:31:41 · 1282 阅读 · 0 评论 -
固定表格td宽度不被撑开
在需要固定表头或表左侧列时,我们需要两个table,然后使用定位的方式达到锁定的效果,那么就需要保证两个表格的每个单元格宽度一致才不会被察觉出来是两个表格。有2种方案,1是等待两个表格都渲染完毕后,获取其中一个表格某行的单元格宽度,逐一设置宽度给另一个表格,达到两个表格同宽的效果。2是设置百分比,td设置百分比的权重要比直接设置具体数值高,但是即使设置了百分比依然可能会被表格内的内容撑开超过...原创 2018-10-12 16:16:02 · 4621 阅读 · 0 评论 -
bootstrap 时间控件及时间转换
时间控件原创 2017-09-10 15:19:35 · 2425 阅读 · 0 评论 -
table、td宽度失效-table布局的问题
项目中table布局还是比较常用的,遇到了一个table宽度失效的问题,先上代码:div style="width:800px;margin: 60px;"> table style="width: 100%;max-width: 100%;"> tbody> tr style="max-width: 900px;overflow: hidden原创 2017-11-16 15:01:18 · 7055 阅读 · 0 评论 -
手写签名插件—jSignature使用心得
最近需要做一个移动端手写签名的功能,上网搜了一下基本都是jSignature这个插件,几乎没得第二选择,于是照着网上的各个版本copy测试,在PC端测试是没什么问题的,很easy。 问题1::在移动端改变了canvas的父盒子大小后就出现问题了,手写的和显示的不在一起,jSignature画笔出现了偏移,经过审查元素发现,是由于canvas的尺寸大小变成了100%引起的,解决办法就是需要原创 2017-12-27 16:44:04 · 30661 阅读 · 8 评论 -
前端压缩图片并获取exif信息
转载自http://icaife.github.io/2015/05/19/js-compress-JPEG-width-exif/<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> </sty原创 2018-03-22 23:45:19 · 1064 阅读 · 0 评论 -
懒加载图片代码
使用lazyload.js 和 swiper.js 一起用时发现加载图片加到一屏后就不加载了,查不出原因,用了下面代码就可以了,亲测可用,移动端、微信都正常。var scrollElement = document.querySelector('.page'), viewH = document.documentElement.clientHeight; ...转载 2018-03-23 21:40:20 · 453 阅读 · 0 评论 -
浏览器打印分页
<HTML><HEAD><TITLE>print</TITLE><meta http-equiv="content-type" content="text/html;charset=gb2312"><style>/**//*** 打印相关*/ @media print {.not转载 2018-05-06 21:57:54 · 933 阅读 · 1 评论 -
微信loading动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-06 21:56:48 · 671 阅读 · 0 评论 -
网易loading图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-06 21:57:38 · 218 阅读 · 0 评论 -
谷歌搜索按钮样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-05-23 18:45:59 · 799 阅读 · 0 评论 -
元素滚动到底部或顶部时阻止body滚动
移动端的弹窗内容有滚动条,滚动到底部或顶部时或影响弹窗下的body滚动,某些浏览器滚动到顶部时不松手就触发了刷新页面的情况,如果不需要这样的默认体验,就需要加一下判断了。 var startX,startY,endX,endY,distanceX,distanceY;//判断容器的滑动方向 //判断元素滑到底部时阻止滑动body,使用时传入局部滚动的选择器即可 ...原创 2018-08-22 11:00:18 · 960 阅读 · 0 评论 -
textarea字数限制的解决方案
方案一input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化,propertychange,只要当前对象属性发生改变。<textarea id="area" name="ss" placeholder="请输入文本内容"></textarea> <p><span id="text-count">20转载 2017-09-13 17:17:07 · 901 阅读 · 0 评论