![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
文章平均质量分 70
haoyanyu_
这个作者很懒,什么都没留下…
展开
-
css伪类nth-child,nth-of-type的顺序是怎么计数的呢?
今天遇到一个坑项目中写css时,如果一个容器里有多个子元素,但是子元素的样式并不是完全一样的,稍微有点差异,这个时候一般通过nth-child(n),或者nth-of-type(n)定制子元素的样式。那么n是如何计数的呢?在这里一直有一个误解,惭愧惭愧~~????如下代码<div class="content"> <p>水平垂直居中, justify-content, align-items</p> <div class="layout allce原创 2020-07-31 21:39:19 · 480 阅读 · 0 评论 -
利用canvas影像合成实现刮刮卡效果
文章目录Canvas对象CanvasRenderingContext2D合成刮刮乐效果的实现Canvas对象HTML的canvas元素;它定义了一个在客户端使用脚本绘图的API,可以直接为这个对象定义width和height。也可以用toDataURL()方法从画布中导出图片。不过实际绘图API是由getContent()方法返回的一个独立“上下文”对象 —> CanvasRend...原创 2020-03-30 16:02:41 · 209 阅读 · 0 评论 -
window.performance对象
通过window.onpageshow的事件对象的persisted属性可以判断页面是否是从缓存读取的。但试了几次,不管刷新还是前进后退persisted都是false。查了一下看到一个新对象window.performance属性如下:其中有个navigation属性,里面的type也是来标记当前页面是刷新还是前进后退打开的memory表示js占用的内存情况;navigation....原创 2020-03-10 15:58:16 · 520 阅读 · 0 评论 -
document对象和window的常用事件
documentreadystatechange当document.readyState的值发生变化时就会触发以上事件readyState的值有:1. loadingDOM还在加载中(此时貌似js还没开始执行,js里捕获不到这个状态)2. interactiveDOM已经加载完毕,css,图片,iframe里的页面还没加载完($(document).ready()就是指这个时候即触...原创 2020-03-10 15:17:45 · 675 阅读 · 0 评论 -
过滤emoji表情
实际项目中,input输入框经常用来输入手机号,姓名,邮箱等内容,会对文本格式进行限制,例如只能输入数字,字幕或者汉字。而iOS输入法中自带emoji表情,要过滤emoji表情时可以使用以下方法filterEmoji(str) { if (typeof str !== 'string') return str; // eslint-disable-next-line re...原创 2020-01-19 14:45:54 · 811 阅读 · 0 评论 -
使用原生drag拖放元素时,event对象的dataTransfer属性们
拖放元素时,拖放事件发生顺序如下:dragstart ->drag -> dragenter -> dragover ->drop ->dragend 还有一个dragleave他们的event对象特有一个dataTransfer属性,主要用于源元素和目标元素之间传递数据dataTransfer属性如下:1. setData(key, value)该方法只...原创 2020-01-03 10:48:03 · 4376 阅读 · 0 评论 -
H5中ondrop事件监听不到,原因竟然跟dragover事件有关!!
问题及解决方法被拖拽元素拖到目标元素后,本想通过目标元素监听ondrop事件来进行业务处理,但是实现过程中发现ondrop事件并没有触发。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte...原创 2019-11-20 21:20:18 · 2618 阅读 · 0 评论 -
安卓Android系统,H5页面键盘弹出后,页面挤压变形或者底部输入框被遮挡的解决办法
键盘弹出挤压页面至变形如下页面,背景图片height: 100%; 底部输入框部分用position:absolute定位,当键盘弹出时,页面整体被挤压;解决方法页面加载后获取视图高度为height,监听window.onresize,指定容器高度为height存在的问题: 偶尔会出现input框获取焦点后,被键盘覆盖,但是在输入内容后滚动到可视区域的现象底部的输入框获焦后,被键...原创 2019-08-08 16:31:07 · 1860 阅读 · 0 评论 -
H5嵌入APP后,通过window.WebViewJavascriptBridge原生APP与H5之间交互
原生APP跳转到H5页面时,往往需要携带一些用户信息,之前做法是在跳转的地址中拼接H5页面需要的参数,现在通过window.WebViewJavascriptBridge悄悄的进行数据交互。本文主要从H5的角度记录交互思路:1:安卓环境和ios环境稍微有点不同,需要根据navigator.userAgent判断一下当前环境2:仍然是APP环境不同,安卓需要进行兼容性判断,如果不存在wi...原创 2019-04-12 15:13:44 · 13313 阅读 · 3 评论 -
input type=['date', 'week']输入框,默认样式修改
H5自带的日期等选择框默认样式略不漂亮,一般使用时候都需要自行自定义一下。以type=“week”为例,原本样子<input type="week" class="week-input" />略加css样式<style>.week-input { border: 1px solid #dcdee2; border-radius: 4px; us...原创 2019-03-04 15:19:34 · 1098 阅读 · 0 评论 -
input type属性
<input type="text" autofocus pattern="^\d*[a-z]+" required placeholder="请输入数字开头字母结束格式"/>必填,自动补全,自动获取焦点,填入的内容必须满足正则表达式<input type="button" value="button"/>按钮<input t原创 2018-12-25 14:01:55 · 2335 阅读 · 0 评论