找到
8
篇与
JS教程
相关的结果
-
iFrame父子相互获取对方dom元素 父页面获取子页面dom的方法/* 必须用onload */ window.onload = () => { const sonWindow = document.querySelector("iframe").contentWindow; const sonDiv = sonWindow.document.querySelector(".son") console.log(sonDiv); }子页面获取父页面dom的方法/* 必须用onload */ window.onload = () => { const parentWindow = window.parent; const parentDiv = parentWindow.document.querySelector(".parent") console.log(parentDiv); } location.href='http://bri6.cn/archives/69.html' -
-
-
给你的网站增加一款简洁而功能强大的音乐播放器 H5播放器介绍APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器MetingJS 是为 APlayer 添加网易云、QQ音乐、酷狗音乐等支持的插件安装教程安装很简单，一共需要调用三个文件：APlayer.min.js APlayer.min.css Meting.min.js你可以使用 CDN 调用，只需要在 <head> 里面插入：<link href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>在 footer 里面插入：<script src="https://cdn.bootcdn.net/ajax/libs/meting/2.0.1/Meting.min.js"></script>当然，你可以将这些文件托管在自己的服务器，把上面的调用链接改成自己的就行了使用方法APlayer 原生用法先看一个最简单的例子：<div id="aplayer"></div> <script type="text/javascript"> const ap = new APlayer({ container: document.getElementById('aplayer'), audio: [{ name: '你从未离去', artist: '白挺', url: 'https://doge.ottoli.cn/你从未离去.mp3', cover: 'https://doge.ottoli.cn/你从未离去.jpg' }] }); </script>在js 代码中：参数 container 值为 document.getElementById('aplayer') 意思是定义当前播放器容器 id 为 aplayer参数 audio 中有 4 个子参数，定义关于音频的相关参数：参数 name 定义音频名称参数 artist 定义艺术家名参数 url 指向音频文件的地址参数 cover 指向音频封面的地址然后，在需要使用播放器的地方，将容器 <div> 的 id 设置为参数 container 中设定的值即可MetingJS 的用法前面已经看到，APlayer 原生用法设置参数十分繁琐，而且只能调用音频文件直链，增加服务器开销。而使用 MetingJS 就很好地解决了这个问题先看一个最简单的例子： 对应的代码为：<meting-js server="netease" type="song" id="31365604" > </meting-js>一个 MetingJS 播放器至少需要三个参数：server 指定调用的 API ，可选 netease, tencent, kugou, xiami, baidu ，分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐type 指定调用类型，可选 song, playlist, album, search, artist ，分别对应单曲、歌单、专辑、搜索结果、艺术家id 指定调用的 id ，一般可以在地址栏中找到当 type 选择的是个播放列表时，生成的播放器是这样的： 播放列表默认是打开的，你可以使用参数 listFolded="true" 使其默认折叠当你设定 fixed="true" ，会生成一个吸附在页面左下角的播放器，就像我的博客左下角那个当你设定 mini="true" ，会生成一个 mini 播放器： 值得注意的是：除了 mini 模式，MetingJS 生成的播放器默认是带有歌词的（而且关不掉）全部参数说明请查阅 MetingJS 官方文档（其实除了三个必要参数其余都和 APlayer 原生参数一样）
-
JavaScript Cookie插件 JavaScript Cookie介绍一个简单、轻量级的JavaScript API，用于处理Cookie安装<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>基本用法创建一个在整个网站上有效的cookie：Cookies.set('name', 'value')创建一个7天后过期的cookie，在整个站点上有效：Cookies.set('name', 'value', )创建对当前页面路径有效的过期cookie：Cookies.set('name', 'value', )读取cookie：Cookies.get('name') // => 'value' Cookies.get('nothing') // => undefined读取所有可见cookie：Cookies.get() // => *注意：通过传递一个cookie属性（可能是也可能不是）来读取特定的cookie是不可能的在编写所述cookie时使用）：*Cookies.get('foo', ) // `domain` won't have any effect...!名为的 foo cookie将仅在以下日期提供 .get() 如果从调用代码的地方可见；读取时，域和/或路径属性不会产生影响。删除cookie：Cookies.remove('name')删除对当前页面路径有效的cookie：Cookies.set('name', 'value', ) Cookies.remove('name') // fail! Cookies.remove('name', ) // removed!这很重要！删除cookie时，如果您不依赖默认属性，则必须传递与设置cookie完全相同的路径和域属性：Cookies.remove('name', )注意：删除不存在的cookie既不会引发任何异常，也不会返回任何值。命名空间冲突如果存在与名称空间 Cookies 冲突的危险，noConflict 方法将允许您定义新名称空间并保留原始名称空间。当在第三方站点上运行脚本时，这尤其有用，例如作为小部件或SDK的一部分。// 将js cookie api分配给不同的变量，并恢复原始的“window.Cookies” var Cookies2 = Cookies.noConflict() Cookies2.set('name', 'value')注意:在 .noConflict 方法在使用AMD或CommonJS时不是必需的，因此它不会在这些环境中公开。Cookie属性Cookie属性默认值可以通过 withAttributes() 创建api实例来全局设置，也可以通过传递一个普通对象作为最后一个参数来单独设置对`Cookie.set(…) 的每次调用。每次调用属性覆盖默认属性。过期定义何时删除cookie。值必须是 Number这将被解释为从创建时算起的天数或 日期例如。如果省略，cookie将成为会话cookie。要创建一个在一天内过期的cookie，您可以查看 Wiki上的常见问题。默认值：当用户关闭浏览器时，将删除Cookie。例如：Cookies.set('name', 'value', ) Cookies.get('name') // => 'value' Cookies.remove('name')路径在 String 指示cookie可见的路径。默认值： /例如：Cookies.set('name', 'value', ) Cookies.get('name') // => 'value' Cookies.remove('name', )关于Internet Explorer的说明：由于基础WinINET InternetGetCookie实现中的一个模糊错误，IE的文档。如果设置了包含文件名的路径属性，cookie将不会返回cookie。(From Internet Explorer Cookie Internals (FAQ))这意味着不能使用 window.location.pathname 设置路径，如果这样的路径名包含这样的文件名： /check.html （或者至少，这样的cookie无法正确读取）。事实上，您不应该允许不受信任的输入设置cookie属性，否则您可能会受到XSS攻击。域名A String 指示cookie应可见的有效域。cookie也将对所有子域可见。默认值： Cookie仅对创建Cookie的页面的域或子域可见，Internet Explorer除外（见下文）。示例：假设正在 site.com 上创建cookie：Cookies.set('name', 'value', ) Cookies.get('name') // => undefined (need to read at 'subdomain.site.com')关于Internet Explorer默认行为的注意事项：Q3: 如果我没有为cookie指定域属性，IE会将其发送到所有嵌套的子域吗？A: 是的，cookie上的example.com集将被发送到sub2.sub1.example.com。Internet Explorer在这方面与其他浏览器不同。这意味着如果您省略了 domain 属性，它将在IE的子域中可见。安全的可以是 true 或 false ，指示cookie传输是否需要安全协议（https）。默认值： 没有安全协议要求。示例：Cookies.set('name', 'value', ) Cookies.get('name') // => 'value' Cookies.remove('name')相同站点A String, 允许控制浏览器是否随跨站点请求一起发送cookie。默认值：未定义。请注意，最近的浏览器将“Lax”设置为默认值，即使没有在此处指定任何内容。示例：Cookies.set('name', 'value', ) Cookies.get('name') // => 'value' Cookies.remove('name')设置默认值const api = Cookies.withAttributes()转换器查看创建api的新实例，以覆盖默认解码实现。所有依赖于正确解码的get方法，如 Cookies.get() 和 Cookies.get('name') ，都将为每个cookie运行给定的转换器。返回的值将用作cookie值。读取只能使用 escape 功能解码的其中一个cookie的示例：document.cookie = 'escaped=%u5317' document.cookie = 'default=%E5%8C%97' var cookies = Cookies.withConverter({ read: function (value, name) { if (name === 'escaped') { return unescape(value) } // 对于所有其他cookie，返回默认值 return Cookies.converter.read(value, name) } }) cookies.get('escaped') // 北 cookies.get('default') // 北 cookies.get() // 写入创建重写默认编码实现的api的新实例：Cookies.withConverter({ write: function (value, name) { return value.toUpperCase() } })
-
JS正则常用校验大全 手机号(mobile phone)中国(严谨), 根据工信部2019年最新公布的手机号段const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d$/; const str = "19119255642"; console.log(`校验 $`);Email(邮箱)const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]\.[0-9]\.[0-9]\.[0-9]\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]))$/; const str = "90203918@qq.com"; console.log(`校验 $`);座机(Tel Phone)电话(国内) 如: 0341-86091234const reg = /^(?:(?:\d-)?\d|^(?:\d-)?\d)(?:-\d+)?$/; const str = "0936-4211235"; console.log(`校验 $`);身份证号(2代,18位数字),最后一位是校验位,可能为数字或字符Xconst reg = /^[1-9]\d(?:18|19|20)\d(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d[\dXx]$/; const str = "12345619991205131x"; console.log(`校验 $`);中文姓名const reg = /^(?:[\u4e00-\u9fa5·])$/; const str = "韩小韩"; console.log(`校验 $`);英文姓名const reg = /(^[a-zA-Z][a-zA-Z\s][a-zA-Z]$)/; const str = "James Han"; console.log(`校验 $`);网址(URL)const reg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s][^!@#$%^&*?.\s])?\.)+[a-z]\/?/; const str = "https://www.vvhan.com"; console.log(`校验 $`);必须带端口号的网址(或IP)const reg = /^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d\/?$/; const str = "https://www.vvhan.com:80"; console.log(`校验 $`);银行卡号（10到30位, 覆盖对公/私账户）const reg = /^[1-9]\d$/; const str = "6222026006705354000"; console.log(`校验 $`);帐号是否合法（字母开头，允许5-16字节，允许字母数字下划线组合）const reg = /^[a-zA-Z]\w$/; const str = "han_666666"; console.log(`校验 $`);中文/汉字const reg = /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/; const str = "易航博客"; console.log(`校验 $`);密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符const reg = /^\S*(?=\S)(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/; const str = "han@666vvx,"; console.log(`校验 $`);微信号(wx)，6至20位，以字母开头，字母，数字，减号，下划线const reg = /^[a-zA-Z][-_a-zA-Z0-9]$/; const str = "kd_-666"; console.log(`校验 $`);邮政编码(中国)const reg = /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d$/; const str = "734500"; console.log(`校验 $`);中文和数字const reg = /^((?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])|(\d))+$/; const str = "易航好6啊"; console.log(`校验 $`);匹配连续重复的字符const reg = /(.)\1+/; const str = "112233"; console.log(`校验 $`);统一社会信用代码const reg = /^[0-9A-HJ-NPQRTUWXY]\d[0-9A-HJ-NPQRTUWXY]$/; const str = "91110108772551611J"; console.log(`校验 $`);子网掩码(不包含 0.0.0.0)const reg = /^(254|252|248|240|224|192|128)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(255|254|252|248|240|224|192|128|0)$/; const str = "255.255.255.0"; console.log(`校验 $`);车牌号(新能源)const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z](?:((\d[A-HJK])|([A-HJK][A-HJ-NP-Z0-9][0-9]))|[A-HJ-NP-Z0-9][A-HJ-NP-Z0-9挂学警港澳])$/; const str = "京AD92035"; console.log(`校验 $`);车牌号(非新能源)const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9][A-HJ-NP-Z0-9挂学警港澳]$/; const str = "京A00599"; console.log(`校验 $`);车牌号(新能源+非新能源)const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9][A-HJ-NP-Z0-9挂学警港澳]$/; const str = "京A12345D"; console.log(`校验 $`);护照（包含香港、澳门）const reg = /(^[EeKkGgDdSsPpHh]\d$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d$)/; const str = "s28233515"; console.log(`校验 $`);
-
JS唤醒Windows10/11消息通知 在写一个应用的时候需要显示网页来的消息，为了让用户不会错过消息，所以希望使用JS调用win10的通知消息，调用方法如下:JS调用window.Notification()1、在页面打开的时候查看浏览器是否支持Notification API，如果支持，则判断是否有权限通知，没有的话交由用户判断是否允许通知(JS代码)：// 判断浏览器是否支持唤醒 if (window.Notification) { let popNotice = () => { if (!Notification.permission === 'granted') return const notification = new Notification('阿巴阿巴', { body: '提示提示提示' }) // 点击通知的回调函数 notification.onclick = function() { window.open('https://baidu.com') notification.close() } } /* 授权过通知 */ if (Notification.permission === 'granted') { popNotice() } else { /* 未授权，先询问授权 */ Notification.requestPermission(function(permission) { popNotice() }) } }2.将应用部署到服务器之后只有https协议的网页可以调用通知功能。
-
Js自动播放HTML音乐（不受浏览器限制，无需先与浏览器交互，无需对浏览器进行修改） 众所周知，声音无法自动播放一直是IOS/Android上的惯例。桌面版Safari也在2017年第11版宣布禁止带声音的多媒体自动播放功能。随后2018年4月发布的Chrome 66正式关闭了声音的自动播放，这意味着音频自动播放和视频自动播放在桌面浏览器中也会失效。 而通过网上搜索来解决这个问题，大部分都会提到使用javascript原生的play()来解决。但是，当你运行它的时候，你会发现你在Chrome浏览器下调用play后的错误：DOMException: play() failed because the user didn’t interact with the document first.但是，如果你想的是将音频当作背景音乐来播放时，当页面加载时音频文件就会自动响起，这个时候，用户是没有与页面进行数据交互的，所以play()会报错，很多人百度后便会找到两种主流的方法One： 1. 进入到 chrome://flags/#autoplay-policy 2. 找到Autoplay policy选项，设置为Setting No user gesture is required 3. 重启:Relaunch Chrome Two： 1. 直接在video标签中属性muted属性，静音播放即可首先说一下方法一。当前的谷歌浏览器已经删除了自动播放策略选项，所以当你进入谷歌浏览器进行设置时，是找不到这个选项的。而且作为网页的背景音乐，你还要把效果展示给别人看。所以，改变浏览器选项还不够成熟。先说第二种方法。如果作为背景音乐播放，可以更改静音属性，达到自动播放的效果。自动播放是可以的，但是这里用户需要的是背景音乐，而且是音频文件，静音属性无法达到这个效果。然后有人问，既然谷歌Chrome的背景音乐不能自动播放，究竟怎么解决呢？这里使用Audio API的AudioContext来自于我搭建的一个播放器。//浏览器适用 contextClass = window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext; try { var context = new contextClass(); var source = null; var audioBuffer = null; function stopSound() { if (source) { source.stop(musics); //立即停止 } } function playSound() { source = context.createBufferSource(); source.buffer = audioBuffer; source.loop = true; source.connect(context.destination); source.start(0); //立即播放 } function initSound(arrayBuffer) { context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数 audioBuffer = buffer; playSound(); }, function(e) { //解码出错时的回调函数 console.log('404', e); }); } function loadAudioFile(url) { var xhr = new XMLHttpRequest(); //通过XHR下载音频文件 xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { //下载完成 initSound(this.response); }; xhr.send(); } //这里用来存储背景音乐的路径 loadAudioFile('audio/music.flac'); } catch (e) { console.log('无法找到音乐！'); }构建播放器后，可以在进入页面时缓存，然后自动播放背景音乐，不考虑浏览器。注意事项这种方法只对浏览器有效，无法实现APP上自动播放音乐的效果。API的AudioContext可能用的不多，欢迎大牛和有个人见解的人站出来和我们讨论。
