![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
caicai1171523597
这个作者很懒,什么都没留下…
展开
-
background-size值:cover、100%和contain的区别
background-size 属性规定背景图像的尺寸。先看看W3C的解释:background-size:contain;等比缩放,按照某一边来覆盖显示区域的,若区域大于图片的比例,会有白边,图片不会变形图片右边有空白区域background-size:100% 100%;---按容器比例撑满,图片变形;图片被横向拉伸background-s...原创 2020-04-30 21:38:02 · 28033 阅读 · 1 评论 -
数组Array进行原型prototype扩展后带来的for in遍历问题
https://blog.csdn.net/m0_37288255/article/details/68065632为了方便获取数组下标对Array写了扩展方法,在用for in循环遍历时却出现了问题。如下所示:/*获取数组元素下标*/Array.prototype.getArrayIndexByValue = function (arr) { for (var i...原创 2019-12-06 12:08:26 · 748 阅读 · 0 评论 -
使用swiper动态加载数据遇到的坑
使用swiper做轮播官网上的用法都很简单,因为案例的数据是写死在html里的,这样的情况下swiper放在页面的任意位置初始化都可以,但是实际开发中,很多时候轮播的数据我们是动态获取的,所以swiper结合动态加载数据的轮播就发现有坑了。在页面开始先初始化的swiper,再发送请求动态加载数据然后生成html插入到swiper的容器里,然后发现多个sw...原创 2019-05-01 15:09:00 · 15908 阅读 · 12 评论 -
ping++实现移动端微信支付
之前做过微信公众号的项目,在微信公众号里可以购买公司提供的服务,因为项目是基于微信端,所以使用的是微信公众账号支付(wx_pub)(也叫微信 JSAPI 支付),现在项目改进,要求在微信浏览器外也能实现微信支付,微信外部浏览器的支付是微信h5支付(wx_wap)(也叫微信 WAP 支付)。ping++号称几行代码就能搞定支付,对这两种常见场景的支付提供了...原创 2019-04-29 19:12:00 · 1443 阅读 · 0 评论 -
CSS设置表格tr行间距的方法
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它的属性值如下:值描述separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cel...原创 2019-03-07 21:58:00 · 15496 阅读 · 0 评论 -
VSCode 常用快捷键 Mac
一.删除整行:command+shift+k二.删除所有空行:1.输入Command + Option + F打开替换栏2.输入正则匹配:^\s*(?=\r?$)\n3.选择全部替换为空基本Command + X 剪切(未选中文本的情况下,剪切光标所在行)Command + C 复制(未选中文本的情况下,复制光标所在行)Option + U...原创 2019-03-05 14:45:00 · 6122 阅读 · 1 评论 -
vscode新建html文件并快速生成标准的html代码
vs code下载安装:在官网下载vs code最新版本并安装,打开如图所示:步骤一:新建文件将自动生成Untitled-1文本文件步骤二:在打开窗口的文件右小角单击文件类型在弹出来的文件类型里选择html步骤三:在html文件里输入英文感叹号!,然后输入tab键,将自动生成标准的html...原创 2019-03-04 21:08:00 · 26606 阅读 · 0 评论 -
左侧菜单栏左滑收起展开效果
上一篇文章左侧菜单栏折叠展开效果-超级简单介绍了将菜单列表上下展开的效果,这里在上一篇文章的基础上增加了左右折叠展开,有时候左侧菜单可能占了屏幕的一部分宽度,我们想把左侧菜单栏收缩起来以此让右边可视区域变大,就可以参考这篇文章的效果啦。效果图如下:一:页面结构:<!DOCTYPE html><html>...原创 2019-01-26 17:31:00 · 4546 阅读 · 0 评论 -
左侧菜单栏折叠展开效果-超级简单
分享一个常见于管理后台的左侧菜单栏折叠展开的效果,基于jquery,效果图如下:一:页面结构:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title>...原创 2019-01-25 17:15:00 · 25323 阅读 · 0 评论 -
表单输入框聚焦输入内容显示叉叉清除效果
处理表单的时候,经常有这种效果,当我们输入内容的时候输入框右边会动态显示一个叉叉图标,点击可以清除已输入的内容,当输入框没有输入内容时,叉叉会自己消失,当输入框焦点消失时,叉叉也会自己消失,最近刚好写了一个这样的效果,分享给大家,效果图如下所示:一:页面html代码:<!DOCTYPE html><html>...原创 2019-01-24 17:23:00 · 5099 阅读 · 0 评论 -
blur事件与click事件冲突的解决办法
在处理表单登录的过程中,遇到了一个问题,当我们在输入框输入内容输入框获取到焦点时,输入框后面会出现一个图标删除已输入的内容,因此删除图标会绑定一个click事件,但是当我们点击图标的时候,也触发了input的blur事件,blur事件会让input失去焦点时隐藏删除的图标,并且blur事件先于图标的click事件执行,因此这时候点击图标并不会删除输入框已输...原创 2019-01-23 14:51:00 · 4452 阅读 · 0 评论 -
几行代码实现自定义标题
在标题左右加上一条横线,以此突出标题,这种样式在开发中很常见,使用css的伪类before、after实现,前面有很多关于伪类实现三角形、聊天气泡框的文章可以自行翻阅,虽然功能很简单,但是这里记录一下分享出来,节约以后的开发时间,效果图如下:css代码: h5{ position: relative;...原创 2019-01-21 17:52:00 · 555 阅读 · 0 评论 -
禁止浏览器默认填充密码的几种方法,亲测有效
很多浏览器在我们初次登录的时候都会弹框询问是否记住密码,如下所示:一旦我们选择了保存,那么后面每次进入网站的时候都会默认填充好密码,如下:如果我们不想再次登录时默认被填充密码,有以下几种方法方法一:<input type="text" onfocus="this.type='password'" name="p...原创 2019-01-19 21:00:00 · 4403 阅读 · 0 评论 -
Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询
在做管理后台功能时,经常需要用到表格展示数据,从数据库查询返回的数据,返回集合或数组到前台,然后前台将数据渲染成表格,方便直观展示数据,通常还需要结合分页、查询、排序。Datatables是一款符合上面所有需求的表格插件,基于jquery,方便我们对表格进行交互操作Datatables中文网链接这是一个读取本地json数据渲染表格的示例...原创 2019-01-18 19:24:00 · 2506 阅读 · 0 评论 -
仿拼多多拼单成功的弹幕队列消息提示
最近写的一个功能和拼多多的弹幕提示功能类似,依次显现多个提示信息,效果图如下:在上篇文章中讲到自定义toast的实现:网页自定义toast提示框,因此这个功能只需要做一些改变即可一:先定义一个数组,存放要显示的信息 var arr = ["A","B","C","D","E"]二:循环数组调用封装好的toast提示...原创 2019-01-11 13:07:00 · 4616 阅读 · 0 评论 -
实现文字平滑弯曲弧形效果的插件-arctext.js
扇形的文字有时候产品大佬就是很任性,说做一个宣传页,一个类似拱门的效果,每次文字不一样,但是文字得呈现拱形状,类似上图啦。尝试自己使用canvas画和css3的rotate旋转div,两种方法都是计算旋转角度的时候很麻烦,因为可能5个字10个字,但是得均匀地呈拱形分布,要知道让每个文字都沿着弯曲路径排布相当的复杂,于是便发现了这个好用的插件...原创 2019-01-08 13:09:00 · 5713 阅读 · 0 评论 -
CSS控制文字超出部分省略号显示
一:单行文本显示不完时,我们只需要设置单行文本的宽度,不允许换行,溢出隐藏及换行省略四个属性即可: p{ max-width: 100px; overflow:hidden; text-overflow:ellipsis; /*禁止换行显示*/ ...原创 2018-12-29 22:49:00 · 550 阅读 · 0 评论 -
使用定时器写一个发送验证码倒计时
登录、注册的时候获取验证码是最常见的场景了,今天记录用定时器写一个倒计时的效果,效果图如下:实际开发中一般为60s或者120s有效时间,此例为了演示假设为6,代码如下:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"...原创 2018-12-27 23:29:00 · 556 阅读 · 0 评论 -
7种方法实现CSS左侧固定,右侧自适应布局
左侧内容固定,右侧自动占满屏幕布局是开发中常见的布局,通常可见于一些管理后台:左侧展示菜单栏,右侧展示管理内容。今天整理了7种实现这种布局的方法:一:float+bfc ,左侧宽度不需要固定,但父级容器宽度需大于左侧宽度,否则右侧被挤压无法展示 /*左浮动固定宽度,右边盒子overflow:hidden触发bfc,使其不与浮动盒子区域重叠,因此会重新...原创 2018-12-26 14:18:00 · 37908 阅读 · 0 评论 -
PC端好用的分页插件jquery.pagination.js使用说明
jquery.pagination.js是一款轻量级的分页插件,依赖JQuery,使用起来方便简单。效果图如下:步骤一:引入相关资源 <script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js" ></script> &...原创 2018-12-25 18:06:00 · 2711 阅读 · 0 评论 -
移动端监听滚动条分页加载列表
在处理列表数据时,当数据量过大时我们都会进行分页处理以此减缓服务器的压力。分页效果如下:在实际项目开发中,分页一般是请求后台接口,传入页码和每页需要展示的数量,后台按照参数返回给前台一个列表和总条数,总条数用于告诉前台是否需要加载下一页。此处我们使用本地模拟的json数据,分页代码如下: var JSON_DATA = ...原创 2018-12-24 12:37:00 · 1017 阅读 · 0 评论 -
动手写一个微信聊天页,有文字,有语音,有图片
今天给大家分享用网页实现移动端微信聊天记录的功能,效果图如下:页面布局中,聊天框使用flex布局,聊天气泡通过伪元素实现(前面文章有记录如何实现一个微信聊天气泡框)语音播放时写的一个css动画,通过改变播放icon的背景图位置使icon变换:icon背景图:voice_icon.png.container .item...原创 2018-12-23 15:49:00 · 1048 阅读 · 0 评论 -
前端模板引擎Handlebars的使用总结(二)
一、Handlebars模板的转义问题1.模板中当使用{{ }}时,转义,输出HTML字符串当使用{{{ }}}时,不转义(识别html标签属性),输出HTML2.Helpers中当return '<span style='color:red'>safe string</span>' 时,转义,输出HTML字符串当ret...原创 2018-12-22 22:34:00 · 830 阅读 · 0 评论 -
前端模板引擎Handlebars的使用总结(一)
模板引擎,就是在定义好的模板上面填充与其对应的数据生成静态的html页面,即:模板 + 数据 =====> html页面模板引擎的作用是抽象公共页面来重用,并且达到【视图(包括展示渲染逻辑)与程序逻辑的分离】(mvvc,mvc等开发模式思想)目前用过的类似模板引擎有JSP、freemarker,这两种都属于java范畴的,服务端解析。而作为...原创 2018-12-22 15:33:00 · 2137 阅读 · 0 评论 -
网页移动端适配动态修改页面font-size
在做移动端的项目时,适配是第一步,最开始写移动端网页的时候学习Bootstrap响应式设计的做法,使用media标签写适配来改变font-size,于是便会有下面这种代码:@media (max-width:992px){ body,html{ font-size:15px; }}@media (max-width:7...原创 2018-12-21 11:56:00 · 1090 阅读 · 0 评论 -
使用ul li标签自定义select下拉框,支持多层级联动展示
在处理表单的网页里,原生的select标签可以满足功能,但是现在的产品一般对用户体验及设计要求比较高,比如下拉框后面的箭头翻转自定义,鼠标悬浮点击的颜色要和整体设计风格一致等等,原生select在每个浏览器下展示不一样,无法满足设计稿要求,于是便自己用ul li写了个简单的下拉框,使用了我们常见的省市区三级下拉为例。效果如下:省市区.gif...原创 2018-12-21 09:22:00 · 4684 阅读 · 0 评论 -
开发中实用CSS干货总结(一)CSS实现上、下、左、右三角箭头
在开发中,三角箭头是很常见的icon,很多时候不需要UI提供切图我们可以自己用几行代码写出来,利用div的边框旋转或者使用伪元素的边框旋转,以下通过几种不同的方法绘制。1.空心线条箭头效果图<!DOCTYPE html><html><head lang="en"> <meta cha...原创 2018-12-20 11:43:00 · 1588 阅读 · 0 评论