Web-Api

关于web-api:Web上的分享ShareAPI

我认为Web Share API十分酷，简而言之，它会利用您所应用的平台上的原生共享性能（如果该平台反对的话）。我喜爱这个：远远不止这些货色：为什么？ Web Share API只是几行代码。简略！没有图像，没有重量级的JavaScript或iframe。用户看到的UI是针对其平台定制的，甚至可能是由他们定制的，以在其中蕴含他们想要的货色。好样的，Web规范。但并不是所有中央都反对。例如，我在Chrome浏览器中写这篇博客文章，在桌面Chrome浏览器中无奈应用，但在桌面的Safari中却能够工作所以，如果我要应用它，我宁愿在把按钮放在页面上之前先测试一下是否反对。这是非常简单的： if (navigator.share) {}上面是一个例子，如果API被反对的话，我把一个 <button> 放在文章上，HTML和CSS省略。 JavaScript做了一些花哨的动作来获取文章的题目和第一段，以便在API中应用。我喜爱Jeremy Keith在页面上的做法： if (navigator.share) { navigator.share( { title: document.querySelector('title').textContent, text: document.querySelector('meta[name="description"]').getAttribute('content'), url: document.querySelector('link[rel="canonical"]').getAttribute('href') } );}你也能够将字符串传递给这些值，这只是在展现你如何在任何页面上动静地做一些工作。 Jeremy也始终在提倡建设一个JavaScript可选的Web Share API版本，他认为能够像这样工作。 <button type="share">而后，指定题目和文本： <button type="share" value="title,text">用逗号对我来说有点时尚，如果题目中蕴含逗号怎么办？那指定URL呢？咱们能够将它们全副分成属性吗？我想我晓得Jeremy会说什么：这是一个简略的申明性版本，如果你想扭转默认行为，那就是JavaScript的作用。如何应用Web Share API自从在Android的Chrome 61中首次引入以来，Web Share API仿佛曾经受到关注。从实质上讲，它提供了一种办法，当间接从网站或Web应用程序分享内容时，能够触发设施（或桌面，如果应用Safari）的本地分享对话框，例如链接或联系卡。尽管用户曾经能够通过原生形式分享网页上的内容，但他们必须在浏览器菜单中找到这个选项，即使如此，也无法控制分享的内容。该API的引入让开发者能够利用用户设施上的原生内容分享性能，将分享性能增加到利用或网站中。与传统办法相比，这种办法具备许多劣势：与你在DIY实现中可能领有的无限数量的内容相比，用户将取得宽泛的内容分享抉择。你能够通过删除各个社交平台上的第三方脚本来缩短页面加载工夫。你不须要为不同的社交媒体网站和电子邮件增加一系列按钮，一个按钮就足以触发设施的原生分享选项。用户能够在本人的设施上定制本人喜爱的分享指标，而不是仅仅局限于预约义的选项。对于浏览器反对的阐明在介绍API的工作细节之前，咱们先把浏览器反对的问题解决掉。说实话，目前浏览器的反对度并不高。它只实用于Android版Chrome浏览器，以及Safari（桌面和iOS）。但不要因而而不违心在网站上采纳这个API。要实现一个反对不提供反对的浏览器的后备性能是很容易的，你会看到的。应用它的一些要求在您本人的Web我的项目上采纳此API之前，须要留神两点：您的网站必须通过HTTPS提供服务。为了促成本地开发，当您的站点通过localhost运行时，该API也能够应用。为了避免滥用，API只能在响应一些用户操作（如点击事件）时触发。这是一个例子为了演示如何应用这个API，我筹备了一个demo，它的工作原理与我的网站上的工作原理基本相同。该示例应用DIY形式，本人自定义分享对话框。此时，一旦点击分享按钮，就会弹出一个对话框，显示出分享内容的几个选项，这是代码的一部分，可帮忙咱们实现这一指标： shareButton.addEventListener('click', event => { shareDialog.classList.add('is-open');});让咱们持续进行示例转换，以改为应用Web Share API。首先要做的是检查用户的浏览器是否的确反对该API，如下所示： if (navigator.share) { // Web Share API is supported} else { // Fallback}应用Web Share API就像调用 navigator.share() 办法并传递一个至多蕴含以下字段之一的对象一样简略。 ...

关于web-api:Web-API7

Swiper插件的应用中武官网地址：https://www.swiper.com.cn/ 1.引入插件相干文件2.依照规定语法应用留神：要引入swiper中的css文件 js文件 html构造等，不要随便更改类名 Swiper的应用办法1.首先加载插件，须要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或应用CDN。 <!DOCTYPE html><html><head> ... <link rel="stylesheet" href="dist/css/**swiper-bundle.min.css**"></head><body> ... <script src="dist/js/**swiper-bundle.min.js**"></script> ...</body></html>2.HTML内容。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div>  <div class="swiper-pagination"></div>  <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>  <div class="swiper-scrollbar"></div></div>导航等组件能够放在container之外3.你可能想要给Swiper定义一个大小，当然不要也行。 .swiper-container { width: 600px; height: 300px;} 4.初始化Swiper <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果须要分页器 pagination: { el: '.swiper-pagination', }, // 如果须要后退后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果须要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script> 5.实现。祝贺你，当初你的Swiper应该曾经能失常切换了。 ...

关于web-api:Web-API6

迟缓动画的原理迟缓动画就是让元素的静止速度有所变动，最常见的迟缓动画就是让动画速度缓缓停下来外围思路让盒子每次挪动的间隔缓缓变小，速度就会缓缓变小外围算法：（目标值-当初的地位）/10 作为每次挪动的间隔步长进行的条件：让盒子以后的地位等于指标的地位，就进行定时器留神步长值须要取整<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } button { margin: 50px; } img { position: absolute; display: block; width: 200px; height: 200px; border-radius: 50%; } </style></head><body> <button>点击挪动至800</button> <button>点击挪动至0</button> <img src="./image/头像.jpg" alt=""> <script> var bth = document.querySelectorAll('button'); var img = document.querySelector('img') // obj：指标对象 target:指标地位 function aniamte(obj, target) { // 革除以前的定时器，只保留以后的计时器 clearInterval(obj.timer); obj.timer = setInterval(function() { // 如果步长为正值则取大如果步长为负值则取小 var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); // 判断：如果指标对象的地位等于指标地位，则革除定时器 if (obj.offsetLeft == target) { clearInterval(obj.timer) } obj.style.left = obj.offsetLeft + step + "px" }, 15); } // 进行调用 bth[0].addEventListener('click', function() { aniamte(img, 800) }) bth[1].addEventListener('click', function() { aniamte(img, 0) }) </script></body></html> ...

关于web-api:Web-API4

键盘事件常见的键盘事件onkeyup:键盘按键按下被松开时触发onkeydown:键盘按键被按下时触发onkeypress:键盘按键被按下时触发（不辨认ctrl shift功能键）三个事件的执行程序：onkeydown----onkeypress---onkeyup <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> document.addEventListener('keydown',function(e){ console.log('键盘按键被按下了keydown') }) document.addEventListener('keypress',function(e){ console.log('键盘被按下了 press') }) document.addEventListener('keyup',function(){ console.log('键盘按键按下被松开了 keyup') }) </script> </body> </html> 键盘事件对象keyCode:返回该键的AScll码留神 onkeydown和onkeyup不辨别大小写，onkeypress辨别字母的大小写在咱们理论开发中咱们更多的应用keydown和keyup，他能辨认所有的功能键keypress不辨认功能键，然而keyCode属性能辨别大小写，返回不同的ASCI值<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <script> // 键盘事件对象中的keyCode属性能够失去相应键的ASCII码值 document.addEventListener('keyup', function(e) { console.log(e.keyCode); if (e.keyCode === 65) { alert("按下a键") } else { alert('没按下a键') } }) document.addEventListener('keypress', function(e) { console.log(e.keyCode) }); document.addEventListener('keydown', function(e) { console.log(e.keyCode) }) </script>></body></html> 模仿京东按键输出内容当咱们按下s键光标就主动定位到搜寻框外面思路如下1.检测用用户是否按下s建，如果按下s键，就把光标定位到搜寻框外面2.应用键盘事件中的keyCod来判断用户是否按下s键3.搜寻框取得焦点：应用js中的focus（）办法 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="text"> <script> var search = document.querySelector('input'); document.addEventListener('keyup', function(e) { // 打印s键绝对应的ASCI嘛 console.log(e.keyCode); if (e.keyCode === 83) { search.focus() } }) </script></body></html> ...