FRONT-END + WEB
以实战为线索,逐步深入React、Vue开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
Rkatsiteli
一个人的快乐,不是因为他拥有的多,而是计较的少!
展开
-
Chrome Color 如何实现颜色采集器
看代码:const eyeDropper = new (window as any).EyeDropper();eyeDropper.open().then((eyeDropperResult: { sRGBHex: string;}) => { console.log(eyeDropperResult.sRGBHex)});官网地址:在这里,可根据浏览器支持度,判断是否支持,可直接使用,拿走不谢!目前浏览器支持度如下:...原创 2022-05-03 15:01:12 · 1155 阅读 · 0 评论 -
Input[type=‘range’] 标签去除内置阴影
Input[type=‘range’] 标签去除内置阴影原创 2022-04-24 17:54:21 · 526 阅读 · 0 评论 -
H5 页面布局 - 滚动条限制
描述:当一个H5页面有头部与尾部的时候,在滑动页面的时候,滚动条会盖在上面,覆盖页面上的所有元素,不大美观,如何做到跟真机一样的效果,直接在指定区域呢?如下:<template> <div class="Index"> <header>标题</header> <section class="content"> <router-link to="/index2"> <button&原创 2020-08-14 15:23:37 · 1028 阅读 · 0 评论 -
H5 img标签图片无法显示 -- 解决方案
如果你也曾复制过一些类似腾讯、百度等各大网站的文章,你会发现黏贴下来发表之后经常出现图片无法显示,这是怎么出现的呢?例如:<body> <img src="http://upload.techweb.com.cn/2017/0106/1483690985396.jpg" /></body>解决方案使用Referer Meta标签控制referer,在H5 的 header加入meta<me原创 2017-01-10 19:41:22 · 30216 阅读 · 2 评论 -
H5 localstorage存储文件
H5 localstorage存储文件利用localStorage储存js文件,只有在第一次访问该页面的时候加载js文件,以后在访问的时候加载本地localStorage执行操作步骤: 1. 创建公共文件config.js文件 2. 页面引用存储 3. 使用接下来config.js 文件附上:;(function(global) { 'use strict'; //检查文件类原创 2017-01-23 14:55:40 · 2989 阅读 · 0 评论 -
Html页面与页面间的交互
HTML 页面与页面间的交互分别为:window.parent 与 window.opener两者简单介绍:1、window.opener 是 window.open 打开的子页面调用父页面对象window.opener 只是对弹出窗口的母窗口的一个引用。比如:a.html中,通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中,就可以通过window.opene翻译 2017-10-19 15:05:58 · 6567 阅读 · 0 评论 -
H5 图像识别
识别对比1、百度识别发现百度的图片搜索识别率不是特别,下面为测试图片跟测试后的结果:测试图片:下面为测试后的结果:2、采用 tesseract.js 后结果H5 图像识别 (采用Tesseract.js 进行识别)简单的文案之类的,识别的还算可以,但是稍微复杂点的,准确率就不是那么好了,在学习中。。。安装<script src='https://cdn.rawgit.com/naptha/tess原创 2017-12-02 22:26:31 · 8911 阅读 · 4 评论 -
H5 语音合成播报功能
采用的 SpeechSynthesisUtterance实现语音播报功能,参考资料: ONE、TWO实现效果图:语法介绍1、speechSynthesis.getVoices()getVoices()的方法SpeechSynthesis接口返回的列表SpeechSynthesisVoice对象代表当前设备上所有可用的声音。2、speechSynthesis.cancel()cancel()的方法Sp原创 2017-11-27 20:18:57 · 17228 阅读 · 36 评论 -
H5 Mock Server 汇总
什么是Mock Server数据?简单来讲,就是API (也就是服务器接口)没有写好前提下,前端无法进行调试,Mock Server 就是用来模拟Api接口返回JSON数据的服务!下面介绍 3 种 mock处理,同时也有很多第三方的,比如(jsonServer + mockJS、webpack + lorem-ipsum等等):1、MockJSmockJS官网 或者 Mo原创 2018-01-09 18:42:43 · 818 阅读 · 0 评论 -
H5 Http请求403 - Referrer Policy
403错误 表示资源不可用。服务器理解客户的请求,但拒绝处理它,通常由于服务器上文件或目录 的权限设置导致的WEB访问错误。遇到的情况:当访问 CDN 或者 第三方资源的时候,经常会出现 403,例如:解决方案:<meta name="referrer" content="no-referrer" />&nb...原创 2018-05-17 20:23:12 · 7209 阅读 · 0 评论 -
iScroll上拉加载下拉刷新 -> 遇到的问题
上拉加载下拉刷新,在网上找的大部分代码都能用点,但是感觉不是特别的友好,总是有点缺陷,都得需要自己修改,缺陷比如:(1)这种 (2)这种其实,修改几处地方即可,截图附上:即可!所有代码在这里:这里写链接内容原创 2016-12-12 18:39:13 · 938 阅读 · 0 评论 -
H5 canvas如何载入视频
Canvas可以载入图片,那么Canvas 也可以载入视频。Canvas加载视频和图片是一样的,使用drawImage,区别就是给一个定时器不停的抓取每帧的画面,放入Canvas画布里面。 示例1 :附上demo:<!DOCTYPE html><html lang="en"> <head> <meta name="viewport" content="width=640,u原创 2016-11-19 21:48:34 · 22418 阅读 · 8 评论 -
Html特殊字符大全
收藏下项目中能用到的图标,有些图标可以当做icon替换,真的很不错!特殊符号命名实体十进制编码特殊符号命名实体十进制编码 ! !"""# #$ &转载 2016-04-08 10:13:07 · 2836 阅读 · 0 评论 -
H5处理不同支持格式(audio)
不同的浏览器支持不同的音频格式,目前好像还没有哪一种格式获得所有浏览器的支持。如果要做到兼容,需要支持字少两种格式:.mp3 和 .ogg.mp3 和 .wav因为 .ogg 采用的是可与 .mp3 的小文件的尺寸相媲美的有损压缩,所以相对于 .wav 而言是一种更好的选择。 使用不同的来源(source )标签来表示,浏览器会从他们支持的格式中选出所支持的来源。<audio cont原创 2016-04-30 18:16:15 · 11901 阅读 · 0 评论 -
调整合适的画布尺寸(游戏)
处理尺寸调整<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>处理尺原创 2016-05-03 14:38:06 · 1880 阅读 · 0 评论 -
meta标签大全(荐)
html的meta总结(常用) 1、大全 <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 页面描述 --> <meta n原创 2016-04-18 19:27:26 · 6369 阅读 · 0 评论 -
Html提示框(fieldset标签)
曾经偶然间发现的一个标签,赶快记录下来,留着以后用。效果图:<fieldset> <legend>登录提示</legend> <div> 代码块<br/> 代码块<br/> 代码块<br/> 代码块<br/> </div></fieldset>原创 2016-04-17 15:02:54 · 758 阅读 · 0 评论 -
H5生成字体图标方法
根据美工提供的.svg文件生成字体图标并应用,留着后用借助一个在线生成工具:https://icomoon.io/app/#/select1、进入网址:主页面2、新建一个图集3、添加.svg图片(可以使用现成的,也可以使用自定义的)使用现成的点击页面红色的Add Icons…使用自定义的.svg文件直接拖拽进图集即可添加可以自由命名修改完成后,点击生成Font下载到压缩文件:运用:将fonts文件夹转载 2016-09-09 17:25:48 · 3034 阅读 · 1 评论 -
H5 web Worker
H5 web WorkerH5线程线程中可用的变量、函数与类self:用来表示本线程范围内的作用域。postMessage(msg):向创建线程的源窗口发送消息。onmessage:获取接收消息的事件句柄。importScripts(urls):导入其它JavaScript脚本文件。参数为该脚本文件的URL地址,可以导入多个脚本文件,导入的脚本文件必须与使用该线程文件的页面在同一个域中,并在原创 2016-08-13 17:47:04 · 1504 阅读 · 0 评论 -
H5 下载文件到本地
H5 下载文件到本地其实,目前下载文件到本地有很多中方法, 不管是 JavaScript 或者 JQuery 也好,都有各色各样的方法,都可以做的到,在这里我介绍下我发现的一个比较简单的方法:HTML5 a 标签的新的属性 a 标签作为超链接标签,虽然在HTML5中没有添加新的语义,但是却新增了一个目前还很少有人知道和应用的download属性。通过 a 标签设置d原创 2016-03-30 11:17:33 · 37516 阅读 · 2 评论 -
移动开发实用
meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略将页面中的数字识别为电话号码<meta name="format-dete原创 2016-04-07 16:58:36 · 1478 阅读 · 0 评论 -
HTML下拉框多选
HTML下拉框多选<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="C原创 2016-02-26 11:37:59 · 24696 阅读 · 3 评论