找到
54
篇与
Web前端
相关的结果
- 第 6 页
-
-
-
给你的网站增加一款简洁而功能强大的音乐播放器 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', { expires: 7 })创建对当前页面路径有效的过期cookie： Cookies.set('name', 'value', { expires: 7, path: '' })读取cookie： Cookies.get('name') // => 'value' Cookies.get('nothing') // => undefined读取所有可见cookie： Cookies.get() // => { name: 'value' }*注意：通过传递一个cookie属性（可能是也可能不是）来读取特定的cookie是不可能的 在编写所述cookie时使用）：* Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect...!名为的 foo cookie将仅在以下日期提供 .get() 如果从调用代码的地方可见；读取时，域和/或路径属性不会产生影响。 删除cookie： Cookies.remove('name')删除对当前页面路径有效的cookie： Cookies.set('name', 'value', { path: '' }) Cookies.remove('name') // fail! Cookies.remove('name', { path: '' }) // removed!这很重要！删除cookie时，如果您不依赖默认属性，则必须传递与设置cookie完全相同的路径和域属性： Cookies.remove('name', { path: '', domain: '.yourdomain.com' })注意：删除不存在的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', { expires: 365 }) Cookies.get('name') // => 'value' Cookies.remove('name')路径 在 String 指示cookie可见的路径。 默认值： / 例如： Cookies.set('name', 'value', { path: '' }) Cookies.get('name') // => 'value' Cookies.remove('name', { path: '' })关于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', { domain: 'subdomain.site.com' }) 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', { secure: true }) Cookies.get('name') // => 'value' Cookies.remove('name')相同站点 A String, 允许控制浏览器是否随跨站点请求一起发送cookie。 默认值：未定义。 请注意，最近的浏览器将“Lax”设置为默认值，即使没有在此处指定任何内容。 示例： Cookies.set('name', 'value', { sameSite: 'strict' }) Cookies.get('name') // => 'value' Cookies.remove('name')设置默认值 const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })转换器 查看 创建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() // { escaped: '北', default: '北' }写入 创建重写默认编码实现的api的新实例： Cookies.withConverter({ write: function (value, name) { return value.toUpperCase() } })
-
JavaScript 正则常用校验大全 手机号(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{8}$/; const str = "19119255642"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);Email(邮箱) const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; const str = "90203918@qq.com"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);座机(Tel Phone)电话(国内) 如: 0341-86091234 const reg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/; const str = "0936-4211235"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);身份证号(2 代,18 位数字),最后一位是校验位,可能为数字或字符 X const reg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/; const str = "12345619991205131x"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);中文姓名 const reg = /^(?:[\u4e00-\u9fa5·]{2,16})$/; const str = "韩小韩"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);英文姓名 const reg = /(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/; const str = "James Han"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);网址(URL) const reg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/; const str = "https://www.vvhan.com"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);必须带端口号的网址(或 IP) const reg = /^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/; const str = "https://www.vvhan.com:80"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);银行卡号（10 到 30 位, 覆盖对公/私账户） const reg = /^[1-9]\d{9,29}$/; const str = "6222026006705354000"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);帐号是否合法（字母开头，允许 5-16 字节，允许字母数字下划线组合） const reg = /^[a-zA-Z]\w{4,15}$/; const str = "han_666666"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);中文/汉字 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(`校验 ${reg.test(str) ? "正确" : "错误"}`);密码强度校验，最少 6 位，包括至少 1 个大写字母，1 个小写字母，1 个数字，1 个特殊字符 const reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/; const str = "han@666vvx,"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);微信号(wx)，6 至 20 位，以字母开头，字母，数字，减号，下划线 const reg = /^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/; const str = "kd_-666"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);邮政编码(中国) 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{4}$/; const str = "734500"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);中文和数字 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(`校验 ${reg.test(str) ? "正确" : "错误"}`);匹配连续重复的字符 const reg = /(.)\1+/; const str = "112233"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);统一社会信用代码 const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/; const str = "91110108772551611J"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);子网掩码(不包含 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(`校验 ${reg.test(str) ? "正确" : "错误"}`);车牌号(新能源) const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z](?:((\d{5}[A-HJK])|([A-HJK][A-HJ-NP-Z0-9][0-9]{4}))|[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳])$/; const str = "京AD92035"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);车牌号(非新能源) const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]$/; const str = "京A00599"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);车牌号(新能源+非新能源) const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/; const str = "京A12345D"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);护照（包含香港、澳门） const reg = /(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/; const str = "s28233515"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);图片
-
三个令人期待的CSS特性即将推出！ 大家好，我是易航，今天给大家总结分享一下很 🐂🍺 的3个即将推出的 CSS 属性，等你看完，每一个都要喊：绝了！ {callout color="var(--theme)"} 声明一下：这些特性现在基本都不好使，就算有的高级浏览器支持了，也只是个例。可以期待一下以后 ~ {/callout} 前端CSS图片 一、@container @container 是一个容器查询方法，正如它的名字一样，它是用来支持根据当前元素所在容器的大小来进行动态修改添加样式的，这跟 @media 基于视口大小是不一样的。 来举个🌰 先创建一个侧边栏和一个主内容 <body> <aside class="sidebar"> <div class="card"> <h4>侧边栏</h4> <p> To the world you may be one person, but to one person you may be the world. </p> </div> </aside> <main class="content"> <div class="card"> <h4>主内容</h4> <p> To the world you may be one person, but to one person you may be the world. </p> </div> </main> </body>让这两个元素横向布局，且侧边栏宽度占 30% ，主内容宽度占 70% body { display: flex; color: white; } h4 { color: black; } .sidebar { width: 30%; } .content { width: 70%; background: #f0f5f9; /* 给个底色，与侧边栏区分 */ } .card { background: lightpink; box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.2); border-radius: 8px; }目前为止是这样的效果： 图片 现在我们发现主内容这块儿空间很富余，便想改变一下标题和内容文字的布局，此时就可以用上 @container 了，直接让主内容在当前容器宽度大于 400px 时变成横向布局 @container (min-width: 400px) { .content .card { display: flex; } }此时效果如下： 图片 是不是很酷 😎 基于这点，还想到了一个之前我做过的需求中很头疼的需求，就是字体大小随着容器宽高的改变而动态改变，如果支持了这个特性，那这个需求也就很简单了 二、object-view-box object-view-box 属性就类似于 SVG 中的 viewBox 属性。它允许您使用一行 CSS 来平移、缩放、裁剪 图像。 我们就对这张图来动动刀子 图片 加一行代码 .crop { object-view-box: inset(10% 50% 35% 5%); }实现的效果就是这样： 图片 跟原图对比一下就是这样： 图片 除了简单的裁剪，我们还能基于它实现一些好玩的效果，例如： 图片 三、animation-timeline animation-timeline 相比前两个就更好玩了！它允许我们基于容器滚动的进度来对动画进行处理，简而言之就是页面滚动了百分之多少，动画就执行百分之多少。而且动画也能根据页面倒着滚动而倒着播放 .shoes { animation-name: Rotate; animation-duration: 1s; animation-timeline: scrollTimeline; } @scroll-timeline scrollTimeline { source: selector('#container'); orientation: "vertical"; } @keyframes Rotate { from { transform: translate(-200px, -200px) rotate(0deg); } to { transform: translate(100vw, 100vh) rotate(720deg); } }使用起来很简单，就是在本身的基础动画上，新增一个 animation-timeline 属性即可，我们也可以对这个 timeline 定义是基于哪个容器，滚动方向是水平还是竖直 大致效果就是： 图片 最后 这三个 CSS 新特性，你们最喜欢哪个？有没有想到一些比较实用的场景，欢迎在评论区分享~
-
JS唤醒Windows10/11消息通知 在写一个应用的时候需要显示网页来的消息，为了让用户不会错过消息，所以希望使用JS调用win10的通知消息，调用方法如下: JavaScript图片 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协议的网页可以调用通知功能。 如果是Win10/11系统的话，可以直接将上面代码复制到F12控制台运行
-
Js自动播放HTML音乐（不受浏览器限制，无需先与浏览器交互，无需对浏览器进行修改） 众所周知，声音无法自动播放一直是 IOS/Android 上的惯例。桌面版 Safari 也在 2017 年第 11 版宣布禁止带声音的多媒体自动播放功能。随后 2018 年 4 月发布的 Chrome 66 正式关闭了声音的自动播放，这意味着音频自动播放和视频自动播放在桌面浏览器中也会失效。 JavaScript图片 而通过网上搜索来解决这个问题，大部分都会提到使用 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 可能用的不多，欢迎大牛和有个人见解的人站出来和我们讨论。
