音乐插件 APlayer
官网: 中文github: 链接基本用法引入<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MoePlayer/APlayer/dist/APlayer.min.css"> <script src="https://cdn.jsdelivr.net/gh/MoePlayer/APlayer/dist/APlayer.min.js"></script>容器<div id="aplayer"><...
v3它没有显式的一个操作,他可以在用户不知道的情况下进行验证,通过判断用户评分这些,不过评分判断要配合后端使用,如果是纯前端操作,那么会和v2一样,成功会返回一个token。基本<script src="https://www.recaptcha.net/recaptcha/api.js?render=第一个key"></script> <script> grecaptcha.ready(function () { grecaptcha.execute('第一个key', { action: ...
相对于复选框式的,该插件还支持隐藏式的。基本型基本型是最简单的一个方式,它需要先将js文件引入,不能异步,并且要开启自动加载组件,基本就是把一个组件绑定在一个按钮元素上,而且这个隐藏式,还需要单独申请一个隐藏式的key,自行申请。<script src="https://www.recaptcha.net/recaptcha/api.js"></script> <script> function onSubmit(token) { console.log(token) } </script><but...
申请key地址:googlev2版就是常见的验证方式,v3是通过判断评分的方式,这里先看看v2的用法。首先google官方文档: 文档提供的api链接国内是无法使用的,需要调整下:https://www.google.com/recaptcha/api.js将这段链接改为:https://www.recaptcha.net/recaptcha/api.js即可。引入js由于js我们可以异步引入,所以官方支持一个load回调,所以使用异步加载js文件的话,你的回调函数记得要写在加载js文件之前官方引入示例:<script src="https://www.recaptcha...
之前可能学过但是忘记了,这个东西平时也用的少,但是却很有用处,就是一个事件。$(document).ready(function () { $(window).on("beforeunload", function (e) { return confirm("弹出提示信息") }) });必须要给window绑定一个beforeunload事件,这个事件会在刷新页面或者关闭页面时触发,而且他不会马上生效,要等页面加载后,等一会才会生效。必须要return出一个confirm确认弹出提示,其他的alert这些是无效,不使用return...
很多项目里面会用到复制和粘贴两个功能,但是我平时也用不到,这里就详细学习一下是怎么运作的。剪贴板事件了解剪贴板有6个事件,其中现代浏览器火狐只支持三个,ie和谷歌则支持全部。事件名说明beforecopy复制事件触发之前触发copy复制beforecut剪切事件触发之前触发cut剪切beforepaste粘贴事件触发之前触发paste粘贴其中火狐浏览器只支持 copy,cut,paste三个事件。其中ie和谷歌浏览器的话是都支持的,并且在ie中使用右键菜单进行复制剪切粘贴的操作,事件会触发多次,而在现代浏览器中,你复制一次,只会触发一次copy事件和beforecopy事件这种,哪怕是右...
逛高斯键盘官网的时候,应该是去年的时候,官网改版后有一个特效挺有意思的,就是数字跳动,之前一直没空研究,今天抽空去看了下,js有一个开源的插件:countUp.js 先看看高斯的效果图:效果就是这样,我们先去下载js文件CountUp.js下载完我们找到dist目录下的countUp.min.js文件,拿出来在你需要的项目中。再新建一个js文件,名称自定义,这里是用于调用countUp的,你可以命名为:start.counUp.js教程注意,使用该功能你需要一个服务器环境,本地直接打开是不行的!引用由于版本更新后,采用了es6的模块写法,引入js文件的时候需要注意不能使用传统的type属...
这个问题一直困扰了我很久了,之前我做手机端侧栏nav的时候也会出现这个问题,因为不影响使用,也暂时没找到处理的办法,索性就没管了,今天尝试了几次方式,发现通过css设置就很很完美的解决的这个问题.首先这个问题一般都是因为我们阻止的touch事件导致的,谷歌为了让滑动能够顺滑,即便我们阻止了默认行为也是滑动的,所以才会出现这个错误.错误提示:[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See解决办法直接给body元素...
之前看过一个主题,忘记是谁的了,他的首页轮播特别好看,当时我还天真的以为他的轮播的背景色是自动获取的,为此还特意自己去看了下自动获取图片平均色,现在学了jq后尝试性仿写了一个,因为找不到原来主题的地址,所以大部分都是凭借自己的印象做的,有能力者可以自行移植到typecho主题上。先上图:响应式预览:功能特性:[x] 采用jquery 3.4.1[x] 图片预加载[x] 自动提取对应的内容[x] 增加自动轮播功能[x] 可以自行移植到主题上使用[x] 响应式功能完善,只是320分辨率及以上设备演示地址轮播图demo
深度克隆主要用于引用类型,因为大部分的引用类型如果某一个实例进行了修改,那么其他同一个引用的实例对象也会发生改变。经过我小段时间的研究,以我目前的了解的来说,方法是没办法完全克隆的,你最多拿到独立属性,原型是共享的,这个没办法克隆,所以有点无解的样子,感觉这个深度克隆也只是表面意义上的克隆。因为不是很懂啊,所以暂时先丢出写的方法吧,等待以后有机会更深入了解再详细说明,主要是我百度到的都是es6标准的一个方法,有些属性我并不了解,不知道他们的实际意义是什么。所以,很无奈啊!function say() { console.log('hi'); } functio...
js阻塞js阻塞其实浏览器的一个很好的机制,浏览器必须在js文件或者代码运行完毕后才会继续其他的工作,比如一个js文件被script元素引用,该元素在head标签中。那么当浏览器加载到head时,会先加载并运行这个js文件,此时,这个script后面的内容都不会做任何处理,只有加载运行完浏览器才会接着加载后面的内容并解析渲染。为什么会这样?原因是因为浏览他并不知道你的js文件做什么,如果他对dom里面的内容做了操作,改变了dom树,那么如果dom树已经完成加载了,js改变后那不是又要重绘一次,那么用户打开网页,页面会先加载完然后闪烁或者发生其他的改变,这对于浏览器来说并不是一个好的方式,...
JavaScript里面继承是怎样实现的?最简单的就是通过原型链继承,然后衍生出几种方法:构造函数继承、组合继承、原型式继承、寄生继承、寄生组合式继承。function Box() { this.name = "鱼儿", this.age = 666 } Box.prototype.run = function(){ return this.name; } function Pox() { this.run = function() { alert(this.name + this.age); } } Pox.prototype = ne...
网页加载动画的原理其实就是当页面加载时他显示的就是加载动画,这个动画浮动于最上层将下面的内容全部遮盖住,而当dom已经加载完毕,触发onload事件,此时再将动画层进行移除处理。那么这样写会导致一个问题,就是你打开任何页面,都会先触发动画层,然后再显示内容,这样就会影响体验,我们之所以加一个动画层,就是为了在用户第一次打开页面的时候,不会卡在空白啊,或者加载资源中而导致页面布局不完整,但是当第一次onload事件完成后,其实浏览器本地已经将大部分的资源进行了缓存,包括css、font文件、img文件,所以,我们只需要第一次加载的时候显示动画层即可。如何判断是第一次加载常用的方法有创建co...
现在给网站做了一个load的加载效果,但是目前流行的应该是Skeleton Screen 骨架屏,这个原本是在苹果端app里制作的,然后有人自己移植到web端,常见h5架构页面,如饿了么、知乎、facebook、酷安,都有应用,那么我就很好奇了,到底是怎么做的,于是百度了一下。了解Skeleton Screen 骨架屏解释有下:简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面,在等待页面加载,渲染完成之后,在保留页面布局样式的前提...
new操作符一般肯定会说创建一个对象,但是实际上其实可以细分为四个步骤。创建一个空对象链接原型改变this指向将这个对象隐式return出来就已new一个构造函数来举例子:你new出来的这个构造函数他本身有对应的属性,也有prototype,你var me = new 构造函数,那么me自然会拥有构造函数的所有。那么这个如何拥有,就是new操作符所做的事情。 var me = new 构造函数(); //等同于如下 var me = function() { var obj = {}; obj._proto_ = 构造函数.prototype; ...
IE浏览器旧版本并不支持html5的语义标签,当我们使用html5架构的时候,旧版本的ie兼容就是一大痛点,好在我们有js,js里面的创建元素,可以创建自定义的元素,也就是说,ie不支持原生的语义标签的问题。目前常用的就是html5shiv框架,这个框架在github上开源,目前我们就只讲 如何调用这个脚本。下载脚本官网地址:github下载完解压,我们找到dist目录下,里面提供了四个脚本文件,一般来说只要使用名为html5shiv.js的文件即可,我们将这个文件提取出来,然后丢入自己博客的js文件夹中,如果是主题,就丢入主题对应的js文件。js脚本调用为了防止冲突我们需要针对性的调用...
昨天看到群里一个人的主题,首页的轮播很有意思,然后他的轮播底色是根据文章图片颜色来自动变动的,我当时就觉得蛮有意思的,但是我没怎么接触过canvas这个东西,html5的时候匆匆带过,然后js的时候也没有讲,索性就自己百度看看教程了,找了好久,大部分都是转载的同一篇文章,然后大佬的那个js算法我实在看不懂,搞不懂为什么要for循环的时候i要乘以图片的宽度,然后再乘以4,在加123这些,后面慢慢搞懂了*4和+123这些意思,但是还是不太懂为啥要乘以图片宽度,嘛,这些暂时不管了,先看看我的想法吧!获取颜色平均值理论阶段首先通过canvas获取到图片的每个像素点的rgba值,然后for循环的时...
什么是表单序列化呢?将所有表单的提交通过一个标准化的方法去获取并且提交出去,那就是序列化,也就是说不同的表单,如注册啊,登录啊,修改资料啊,这些东西可以通过一个通用的方法去处理它。那么表单序列化有几个要求:不能发送禁用的表单字段;只发送勾选的复选框和单选按钮;不发送type是reset、submit、file、button以及字段集;多选选择框中的每个选中的值单独一个条目;对于select元素,如果有value值,就指定value作为发送的字段,如果没有,就指定text值;已经将ajax的代码作为单独的一个文件保存,而调用则使用ajax()的方法,之前也做了一个表单提交的方法,在所有条件...
最近评论