TypeScript & JavaScript
文章平均质量分 51
废柴小z
这个作者很懒,什么都没留下…
展开
-
移动端模拟tap事件
【代码】移动端模拟tap事件。原创 2023-05-26 10:38:27 · 153 阅读 · 0 评论 -
MediaDevices.getUserMedia()
原文:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMediaMediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D转换器等等),也可能是其它轨道类型。它转载 2021-11-29 15:56:45 · 667 阅读 · 0 评论 -
js读取二进制文件
function downloadData(url) { return new Promise((resolve,reject) => { var xhr = new XMLHttpRequest(); xhr.responseType = "blob"; xhr.onreadystatechange = function () { if (xhr.readyState == 4) { v原创 2021-08-19 14:25:58 · 3831 阅读 · 0 评论 -
H5部署后navigator获取不到mediaDevices问题处理(navigator.mediaDevices为undefined)
问题产生最近在开发过程中,有一个具体需要要使用摄像头内嵌到h5页面中实现拍照效果,相当于变相通过还H5调原生拍照、摄像等效果。在这个过程中发现在开发环境时,各种访问媒体设备都没有问题,但是当部署到服务器上,手机和电脑浏览器都无法调起摄像头,比较郁闷,阅读了很多文章和原生文档后才知道原因并解决。问题分析解决这是由于浏览器的安全策略导致的,目前本人翻阅到的文档,有下面三种情况是可以调起设备的,也就是navigator.mediaDevices不为undefined:地址为localhost:// 访转载 2021-08-04 14:19:41 · 3879 阅读 · 0 评论 -
前端代码规范
代码千万行,安全第一行;前端不规范,同事两行泪。一、命名规范(一) 项目命名全部采用小写的方式以中划线分割正确命名:mall-management-system (商城管理系统)错误命名:mall-management-system 或 mallManagementSystem(二) 目录命名全部采用小写的方式以中划线命名复数时,要采用复数结构正确命名:sctipts / styles / utils / demo-scripts(三) JS、CSS、SCSS、HTML、PNG等文件原创 2021-06-24 13:40:49 · 204 阅读 · 0 评论 -
js设计模式
// 对象收编变量 var checkObject = { checkName(){return this}, checkEmail(){return this} } checkObject.checkName().checkEmail();// this指向当前对象,return this后可以链式调用; var checkObject = function(){// 这种写法的作用: 每次调用都会返回新的对象,这样每个人使用时就不会互相影.原创 2021-06-17 19:53:43 · 72 阅读 · 0 评论 -
shadow DOM
Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净、整洁。其中,Shadow DOM 接口是关键所在,它可以将一个隐藏的、独立的 DOM 附加到一个元素上。本篇文章将会介绍 Shadow DOM 的基础使用。备注: Firefox(从版本 63 开始),Chrome,Opera 和 Safari 默认支持 Shadow DOM。基于 Chromium 的新 Edge 也支持 Shadow DOM原创 2021-06-17 15:17:47 · 353 阅读 · 0 评论 -
WebAssembly简介
2019 年 12 月 5 日,WebAssembly正式加入 HTML、CSS 和 JavaScript 的 Web 标准大家庭。很多事情都会受益于这一全新的标准,并且它在浏览器中的性能表现是空前的。WebAssembly的诞生背景1995 年,布伦丹·艾希(Brendan Eich)用了不到 10 天就创建了 JavaScript。那时,JavaScript 的设计并非以速度见长。它基本上是用于表单验证的,同时速度非常缓慢。随着时间的流逝,它也在一天天变好。在 2008 年,异军突起的谷歌推出了自原创 2021-06-03 14:56:31 · 833 阅读 · 1 评论 -
js导出表格
ActiveXObject(“Excel.Application”)这种方法只能在IE下使用。优点:参照VBA控制excel对象。(代码不会的可以录制宏)缺点:引用cell对象太慢,上万行数据导出时间超过2分钟以Table方式导出为html文件。以CSV方式导出。使用中发现如果数据较多,上述第2、3中方法会失效,因此又整理了第4种方法 toLargerCSV。第4种方法在IE10、chrome测试通过//以Table格式导为xls文件TableToExcel(){ //要导出的j.转载 2021-03-09 17:51:33 · 313 阅读 · 0 评论 -
async函数
asybc表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果,async函数的返回值是Promise对象(如果不是,会被立即转成一个立即resolve的对象),可以用then方法添加回调函数,async函数返回的Promise对象必须等到内部所有await命令后面的Promise对象执行完才会发生状态改变(或者说才会执行then方法指定的回调函数),除非遇到return语句或抛出错误。当函数执行时,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句,async函数原创 2021-02-19 09:43:18 · 172 阅读 · 0 评论 -
输入网址到显示网页经过了哪些过程
输入网址到显示网页经过了哪些过程:输入网址;发送到DNS服务器,并获取域名对应的web服务器对应的ip地址;与web服务器建立TCP连接;浏览器向web服务器发送http请求;web服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址);浏览器下载web服务器返回的数据及解析html源文件;生成DOM树,解析css和js,渲染页面,直至显示完成;移动端适配媒体查询@mediaflex布局百分比布局rem+viewport缩放...原创 2021-01-17 14:24:57 · 3111 阅读 · 0 评论 -
js获取img原始宽高
获取img原始宽高使用:naturalWidth,naturalHeight。如果图片宽高比大于浏览器宽高比,则设置图片宽100%,高度自适应;如果图片宽高比小于浏览器宽高比,则设置图片高100%,宽度自适应;resizeImg(index){ const windowW = document.body.clientWidth; const windowH = document.body.clientHeight; const boxRatio = windowW / windowH;原创 2021-01-12 11:31:10 · 1143 阅读 · 0 评论 -
vue实现自定义video的controller
html:<div ref='videoContainer' :class="['myvideo-box',fullScreenState ? 'fullscreen' : '']" @mousemove='controlerShowControl(true)' @mouseout='controlerShowControl(false)' @click='controlerShowControl(true)'> <video ref='vide原创 2020-09-02 17:22:39 · 2310 阅读 · 0 评论 -
项目中遇到的一些小问题记录
video禁止画中画video标签添加ref='video'vue代码中添加this.$refs.video['disablePictureInPicture'] = true;浏览器禁止长按出菜单给body添加oncontextmenu="forbidMenu()"在js中添加function forbidMenu(){ window.event.returnValue=false; return false; }...原创 2020-08-13 13:49:51 · 201 阅读 · 0 评论 -
js设计模式一
// 对象收编变量var checkObject = { checkName(){return this}, checkEmail(){return this}}checkObject.checkName().checkEmail();// this指向当前对象,return this后可以链式调用;var checkObject = function(){// 这种写法的作用: 每次调用都会返回新的对象,这样每个人使用时就不会互相影响 return { c原创 2020-07-15 13:18:15 · 97 阅读 · 0 评论 -
js实现跑马灯
<div class="carousel-title-inner"> <span>{{item.title}}</span></div> .carousel-title-inner{ width: 100%; position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%); height: 10.4rem; o原创 2020-07-14 18:33:41 · 1211 阅读 · 0 评论 -
博客传送门
css3 grid布局: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.htmlwebworker: http://www.ruanyifeng.com/blog/2018/07/web-worker.html浏览器数据库 IndexedDB http://www.ruanyifeng.com/blog/2018/07/indexeddb.htmlNode 定时器详解 http://www.ruanyifeng.com/blo原创 2020-07-06 18:47:58 · 293 阅读 · 0 评论 -
浏览器设置跨域
版本号49之前的跨域设置先介绍一下老方法,参考了一些网上的教程,其实直接在打开命令上加–disable-web-security就可以了。具体做法为:1.下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。2.在属性页面中的目标输入框里加上 --disable-web-security 如下图所示:3.点击应用和确定后关闭属性页面,并打开chrome浏览器。如果浏览器出现提示“你使用的是不受支持的命令标记 --disable-web-security”,那么说原创 2020-07-05 15:23:43 · 2849 阅读 · 0 评论 -
判断js数据类型
var u, s = 'string', b = false , nb = 0, sy = Symbol();var n = null, a = [], o = {}, f = () => {}, r = /^string$/;// 判断简单数据类型console.log(typeof u);// undefinedconsole.log(typeof s);// stringconsole.log(typeof b);// booleanconsole.log(typeof nb);原创 2020-07-03 09:42:09 · 142 阅读 · 0 评论 -
js中的堆和栈
JavaScript内存是怎么样的?JavaScript中的变量的存放有有原始值与引用值之分,原始值代表了原始的数据类型,如Undefined,Null,Number,String,Boolean类型的值;而Object,Function,Array等类型的值便是引用值了。JavaScript中的内存也分为栈内存和堆内存。一般来说,栈内存中存放的是存储对象的地址,而堆内存中存放的是存储对象的具体内容。对于原始类型的值而言,其地址和具体内容都存在与栈内存中;而基于引用类型的值,其地址存在栈内存,其具体内转载 2020-05-22 10:03:22 · 1072 阅读 · 0 评论 -
js快速排序与冒泡排序
快速排序function quickSort(arr){ if (arr.length <= 1) return arr; var pivotIndex = Math.floor(arr.length/2); var pivot = arr.splice(pivotIndex,1)[0]; var left = []; var right = []; for (let i = 0; i < arr.length; i++) { i.原创 2020-05-22 12:34:58 · 198 阅读 · 0 评论 -
js原型
创建对象创建对象的方式:1. 字面量2. new Object(); var stu1=new Object(); stu1.name="小明"; stu1.eat=function () { console.log("吃米饭"); };3.自定义构造函数function Person(name,age) { this.name=name; this.age=age; this.sayHi=function () { console.log("我叫原创 2020-05-14 09:56:42 · 145 阅读 · 0 评论 -
js实现贪吃蛇小游戏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #map { width: 800px; height: 600px; background-color: #CCC; /*食物的div需要在map上随机的位置显示*/原创 2020-05-14 09:57:33 · 249 阅读 · 0 评论 -
js基础讲解
简介js是一门脚本语言,弱类型语言,声明变量都要用var,解释性语言,动态类型的语言,基于对象的语言编译语言:写的代码通过编译器编译,然后执行脚本语言:写的代码直接执行,不需要编译JavaScript语言分三个部分:1.ECMAScript标准—js的基本语法2.BOM—浏览器对象模型3.DOM—文档对象模型js的代码三种写法:可以怎么写1.行内的方式写js的代码,把js代码写在了html标签中<input type="button" value="点我啊" oncli原创 2020-05-13 11:56:51 · 284 阅读 · 0 评论 -
javaScript--animate函数
一、思路1、获取目标值2、再获取初始值3、得到总距离4、定义定时器的执行间隔5、获取时间6、得到总次数7、总距离/总次数 = 步长8、使用setInterval不停地改变dom元素的每一个css值 让元素不停地改变样式 造成动画的错觉。9、定义一个计数器 每改变一次样式就累加一次 直到计数器大于等于总次数 此时说明执行完毕10、强行拉到终点11、停表12、执行回调函数二、...原创 2020-05-06 17:19:28 · 5798 阅读 · 0 评论 -
location.hash详解
一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username在我印象中,这是主流网站第一次将"#"大规模用于直接与用户交互的关键URL中。这表明井号(Hash)的作用正在被重新认识。本文根据HttpWatch的文章,整理与井号有关的所有重要知识点。...转载 2020-02-20 09:21:14 · 393 阅读 · 0 评论 -
ES6模块化使用
ES6已经支持模块化,但是直接使用import引入其他文件export的对象会报错Uncaught SyntaxError: Unexpected token {这是因为export/import 属于ES2015标准的内容,浏览器加载ES2015模块化代码也是标签,但是要加入type="module"属性,如下:<script type='module'> import {...原创 2019-12-06 10:21:03 · 412 阅读 · 0 评论 -
TypeScript必备知识点
TypeScript环境配置热更新ts初级使用* npm install -g typescript* 新建main.ts并写入ts代码* 命令行键入tsc main.ts即可生成main.js生成tsconfig.json:命令行键入tsc --init即可生成tsconfig.json配置:"compilerOptions": { "target": "es2015...原创 2019-12-04 11:17:08 · 261 阅读 · 0 评论 -
Promise用法
function timeout(ms) { return new Promise((resolve,reject) => { login({username:username,password}) // .then(response => { // const data = response; // ...原创 2019-12-03 17:29:02 · 138 阅读 · 0 评论 -
聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer
// 让浏览器帮我们创建一段 8 个字节长度的内存区域。let buffer = new ArrayBuffer(8);// 字节:计算机存储的最小单位console.log(buffer.byteLength);// 字节长度为8(1字节为一个8位二进制数1Byte=8bit),8字节意味着有8个bit,即8个 8位二进制 的位置;console.log(buffer[0]);In...转载 2019-12-03 17:25:45 · 1176 阅读 · 1 评论