大屏自适应
12345678910111213141516171819202122// 大屏自适应代码function scaleView() { var screenWidth = 1920; var screenHeight = 1080; var wScale = window.innerWidth / screenWidth; var hScale = window.innerHeight / screenHeight; var trueTop = (window.innerHeight - screenHeight * wScale) / 2; var trueLeft = (window.innerWidth - screenWidth * hScale) / 2; if (wScale >= hScale) { $(".mainBg").css({ transform: "scale(" + hScale + ")", top: 0, le ...
javascript根据当前是否为移动设备动态加载css样式表
判断设备是否为手机1234567891011//判断设备是否为手机var ua = navigator.userAgent;var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), isAndroid = ua.match(/(Android)\s+([\d.]+)/), isMobile = isIphone || isAndroid;if (isMobile) { include_css("test1.css");} else { include_css("test2.css");}
网页 js 加载 css 样式表123456789101112131415161718192021// 网页js加载css样式表var css;function include_css(css_file) { var html_doc = d ...
Javascript 判断浏览器版本
Javascript 判断浏览器版本123456789101112131415161718192021222324252627282930function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器 var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器 var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0" ...
javascript保存文件到本地
javascript保存文件到本地12345678910111213141516171819202122232425262728293031exportRaw(filename, content);function fakeClick(obj) { var ev = document.createEvent("MouseEvents"); ev.initMouseEvent( "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null ); obj.dispatchEvent(ev);}function exportRaw(name, data) { var urlObject = window.URL || window.webkitURL || window; var export_blob = new Blob ...
three.js 波浪动画（鼠标可控制）
three.js 波浪动画（鼠标可控制）123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;var container;var camera, scene, renderer;var particles, particle, count = 0;var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth / 2;var ...
防抖动函数和节流函数
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。
通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。
让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。
html 文件中代码如下
12345678910<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div><script> let num = 1; let content = document.getElementById('content'); function count() { content.innerHTML = ...
什么是BFC？看这一篇就够了
BFC 定义
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
Box：css布局的基本单位Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, in ...
VantUI上传图片前进行压缩
VantUI 上传图片前进行压缩123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960// 大于1M的图片压缩zipPic(file) { // 大于1MB的jpeg和png图片都缩小像素上传 if (/\/(?:jpeg|png|jpg|bmp)/i.test(file.file.type) && file.file.size > 1024 * 1024) { // 创建Canvas对象(画布) let canvas = document.createElement('canvas') // 获取对应的CanvasRenderingContext2D对象(画笔) let context = canvas.getContext('2d') // 创建新的图片对 ...
