前端知多少
前端小知识
Wish3D
一直前端儿
展开
-
前端开发图标实现变色原理
以前做一张很小且不影响整体风格的图标还要设计人员切成图片,然后使用css背景或者img资源引用,解决体积加载问题使用雪碧图方式。随着前端的技术的飞速发展,各大厂商都推出很多各式各样的组件库,如:tddesign、antdesign、materialdesign.....他们都包含了图标组件。图标组件大致分为两大类:1:通过字体实现:如bootstrap,iconfont等;2:通过包装svg显示...原创 2023-02-08 09:05:00 · 109 阅读 · 0 评论 -
Cesium系列实现电光弧圈
var shader = `uniform vec4 color;uniform float speed;#define pi 3.1415926535#define PI2RAD 0.01745329252#define TWO_PI (2. * PI)float rands(float p){ return fract(sin(p) * 10000.0);}float ...原创 2022-09-21 13:25:30 · 309 阅读 · 1 评论 -
移动页面自适应手机屏幕宽度
网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。 1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释该标签的含义: <meta name="viewport" content=...原创 2017-05-08 02:20:34 · 120 阅读 · 0 评论 -
IDE Tomcat 虚拟目录 设置两种方法
1.使用tomcat自己的虚拟路径 1.1.在tomcat\config\server.xml中配置path="/upload" 虚拟路径E:\photo\upload 图片存放的真实路径 <Context path="/upload" docBase="E:\pho...原创 2018-04-18 06:19:56 · 145 阅读 · 0 评论 -
js 新增标签页被拦截?怎么办?
js 新增标签页被拦截?怎么办? var newWin = window.open('about:blank', '_blank');newWin.location.href="http://www.baidu.com"原创 2019-02-18 09:20:44 · 238 阅读 · 0 评论 -
前端本地文件操作与上传(摘录)
前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发: 通过input type=”file” 选择本地文件 通过拖拽的方式把文件拖过来 在编辑框里面复制粘贴 第...原创 2018-01-04 04:18:02 · 137 阅读 · 0 评论 -
为什么你从canvas toDataURL 得到黑图片?
前段时间做WebGL相关的项目遇到的,其实就是缓冲数据问题,一般2d都可以正常输出,但是到了WebGL就嗝屁了,希望对你有用原创 2017-07-04 12:51:31 · 2361 阅读 · 1 评论 -
MIME
格式前面为后辍名,后面为对应的MIME型(例如:rar application/x-rar-compressed 表示。RAR对应的是application/x-rar-compressed ) { ".323", "text/h323" },{ ".3gp", "video/3gpp" },{ ".aab", "application/...原创 2018-01-04 04:29:13 · 92 阅读 · 0 评论 -
别人复制你的网站文字,自带“自定义前后缀”
function setClipboardText(event) { event.preventDefault(); //阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。 var node = document.createElement('div'); //对documentfragment不熟,不知道怎么获取里面的内容,用...原创 2018-05-10 09:05:04 · 307 阅读 · 0 评论 -
Iframe框架的各种操作,专治各种不服
脚本操作框架页面 测试环境IE6、IE9、火狐 JQUERY引用地址 一、IFRAME框架 页面示例 <iframe id="ifr1" frameborder="1" scrolling="no" src="H16-1.htm" style="width: 45%; heigh...原创 2017-05-11 03:04:24 · 348 阅读 · 0 评论 -
web文件夹上传!
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>upload dialog</title></head><body><input id="dialog" type="fil...原创 2019-02-18 11:44:20 · 88 阅读 · 0 评论 -
ShareWorker的使用说明(网上的这些都太不详细了,容易误导大家)
官方并没有给出多个标签页共享线程的(明显)案例,所以会导致别人按照官网的代码写了,为什么没有推送到其他页面呢?经过自己反复测试,加上问了一些富有经验的同学,搞明白了,原因就是共享js没有存储客户端(标签页),接受到推送时候要向每个客户端都推送。 1.ShareWorker.js var clients = [];oncon...原创 2018-06-22 09:14:01 · 969 阅读 · 0 评论 -
cesium调用天地图服务
全球矢量地图服务 var viewer = new Cesium.Viewer("cesiumContainer", { animation: false, //是否显示动画控件 baseLayerPicker: false, //是否显示图层选择控件 geocoder: true, //是否...原创 2017-12-01 02:15:21 · 206 阅读 · 0 评论 -
NodePPT使用方法
使用:‘ 1、首先安装nodejs环境; 2、安装nodeppt: npm install -g nodeppt 3、启动:nodeppt start -d D:/webppt -p 8099 (把demo中ppts中的例子拷贝到D:/webppt下) ...原创 2018-03-07 15:18:42 · 851 阅读 · 0 评论 -
css clip 巧用可以用分屏效果
css clip 通过查询w3cshool 可知该功能学名叫做“图像裁剪”,clip 属性剪裁绝对定位元素(此处是最关键的地方)。 当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。 clip:rect (top,right,bottom,left)...原创 2019-02-13 06:41:17 · 290 阅读 · 0 评论 -
事件捕获&事件冒泡简单实例
<html><head></head><body><div id="div1" style="background: blue;width: 100px; height: 100px;"> <div id="div2" style="background: red...原创 2018-09-06 05:26:52 · 123 阅读 · 0 评论 -
canvas元素内容生成图像文件
准备工作 想要将canvas元素当前显示的内容生成为图像文件,我们首先要获取canvas中的数据,在HTML5 <canvas>元素的标准中提供了toDataURL()的方法可以将canvas中的内容生成为指定格式的DataURL,使用方法如下: // 假设有一个id为cvs的canvas元素var dataurl = ...原创 2017-11-10 03:07:53 · 205 阅读 · 0 评论 -
获取系统cpu,gpu,主板等信息(仅IE)
<html> <head> <style type='text/css'> body{font-size:12px;} body table tr td{font-size:12px;} </style> <script> ...原创 2019-06-20 03:00:01 · 748 阅读 · 0 评论 -
怎样屏蔽别的开发人员调试你的代码
var ConsoleManager = { onOpen: function () { try { window.open("about:blank", target = "_self") } catch (e) { var n = document.creat...原创 2019-12-19 06:25:45 · 242 阅读 · 0 评论 -
Markdown转成带目录的Html(i5ting_toc)
Markdown无论在编程还是平时其他工作学习中都扮演着重要的角色,如:开发文档、产品说明,甚至是流程图...... 但是有的时候需要我们以网页形式展示给他人阅读,当遇到这种场景时候我们需要从两个方面考虑该问题:1.是不是可以直接找个框架直接在线吧md文档转一下?2.是不是工具直接把md转成html文件,然后发布出去?相比较之下我选择了后者。 废话不多说上...原创 2019-12-02 07:02:10 · 533 阅读 · 0 评论 -
i5ting_toc转成的html,怎样高亮代码?
上节 Forever Sun:Markdown转成带目录的Html(i5ting_toc) 已经讲了markdown怎样转成html,这节我们学习怎样把转好的html,代码部分怎样高亮。 本文采取的高亮插件是谷歌的 google/code-prettify 会了下面的操作您可以使用如highlight.js,SyntaxHighlighter...原创 2019-12-02 07:16:29 · 367 阅读 · 2 评论 -
scrollIntoView
远程支持滚顶元素 document.getElementById("yyy").scrollIntoView()原创 2019-06-18 09:53:37 · 113 阅读 · 0 评论 -
Google V8 即将更新8.0版本
8.0版本主要区别之前版本的是内存性能的提升 怎样查看您浏览器的引擎版本呢? chrome : //version 比如我现在用的版本是: ...原创 2020-01-13 05:57:36 · 259 阅读 · 0 评论 -
Nginx 快速发布 静态网站
随着网站技术的飞速发展,很多网站技术都趋向成熟,那么我们怎样发布一个站点呢? 很多软件都支持,tomcat,iis,xampp,apache等等,本文主要是介绍nginx怎样发布. 1.下载nginx并安装 nginx: download 下载对应的系统版本,本人下载的是window版本 2.找到安装路径 ...原创 2019-09-17 06:21:16 · 463 阅读 · 0 评论 -
css中的clip属性已经废弃,请用clip-path
clip-pathCSS属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切clip属性。 ...原创 2019-10-17 07:11:04 · 748 阅读 · 0 评论 -
video 属性和事件用法大全
1.属性 <!-- video 不支持 IE8及以下版本浏览器,支持三种视频格式:MP4,WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> &l...原创 2019-07-02 01:56:56 · 197 阅读 · 0 评论 -
Yarn基本用法与Npm基本用法对比
1、初始化一个新的项目 yarn init 2、添加一个依赖包 yarn add [package]yarn add [package]@[version]yarn add [package]@[tag] 3、安装所有的依赖包 ...原创 2019-08-19 06:32:02 · 106 阅读 · 0 评论 -
五大主流浏览器及四大内核
只是用户看到仅仅只是浏览器本身,却很少能看到浏览器最核心的部分—浏览器内核。从第一款libwww(Library WorldWideWeb)浏览器发展至今已经经历了无数竞争与淘汰了。现在国内常见的浏览器有:IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等...原创 2020-01-15 09:01:06 · 597 阅读 · 0 评论 -
js 沙箱模式原理
//开启沙箱模式function run() { var iframeContent = $("#editor").val();//html内容 loadPreview(iframeContent);}//填充预览效果内容function loadPreview(content) { var iFrame = cre...原创 2019-02-18 11:59:04 · 812 阅读 · 1 评论 -
怎样把自己写的组件、库推到npm服务上面,并给别人使用?
1.创建npm账号 2.cmd命令行到某个文件夹下,然后登录 npm login 3.npm init填写包名,以及一些信息 ...原创 2019-03-12 11:09:00 · 842 阅读 · 0 评论 -
前端获取ip(非IE)
function getYourIP(){ var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; if (RTCPeerConn...原创 2019-06-20 03:10:46 · 756 阅读 · 0 评论 -
js 显卡信息
var canvas = document.createElement('canvas');var gl = canvas.getContext('webgl'); // 等同于 canvas.getContext('experimental-webgl');var debugInfo = gl.getExtension('WEBGL_deb...原创 2019-06-20 03:18:47 · 654 阅读 · 0 评论 -
LSV&&Global Mapper应用----影像裁剪
上两节主要讲影像和地形的下载,本节主要讲影像的裁剪 请自行百度下载安装Global Mapper 1.打开前面下载下来的影像文件夹,如图 我们使用19级影像来裁剪,因此打开文件夹“...原创 2020-01-17 07:55:19 · 2252 阅读 · 0 评论 -
LSV&&Global Mapper应用----影像下载
本文主要讲LSV影像下载 首先要到locaspace viewer官网下载LSV安装程序自行安装。 一、影像下载 1.切换下载 2.点击影像 ...原创 2020-01-17 06:21:56 · 2078 阅读 · 2 评论 -
npm升级所有的依赖包
npm-check是用来检查npm依赖包是否有更新,错误以及不在使用的,我们也可以使用npm-check进行包的更新 安装npm-check: npm install -g npm-check 检查npm包的状态: npm-check -u -g ...原创 2019-02-18 12:06:01 · 1689 阅读 · 0 评论 -
LSV&&Global Mapper应用----地形下载
上一节已经介绍了影像下载,本文主要讲LSV地形下载 首先要到locaspace viewer官网下载LSV安装程序自行安装。 一、地形下载 1.切换下载 2.点击谷歌地形...原创 2020-01-17 07:30:09 · 1042 阅读 · 0 评论 -
www和https://又被Chrome地址栏隐藏了
反正就是谷歌干的戳事,那就解决吧. 方法1:禁用 要禁用对 url 的隐藏,可以执行以下步骤: 打开 Chrome 浏览器并在地址栏中输入 chrome://flags/#omnibox-ui-hide-steady-state-url-scheme-and-subdomains,然后按回车 Chrome 将...原创 2019-08-23 03:00:53 · 2761 阅读 · 0 评论 -
Cesium系列产品,实现gif 布告板(billboard)
实现思路以及原理:1.billboard支持图片格式可以是图片地址也可以是base64图片内容;2.获取gif图片的帧值更新对应image;3.Cesium.CallbackProperty;根据上面思路,我们可以找有没有现成获取gif帧换面的工具:buzzfeed/libgif-js有了上面的工具就已经成功一半了;libgif插件需要一个dom对象,所以我们在页面里面增加一个标签:<scr...原创 2021-06-13 15:14:55 · 739 阅读 · 1 评论 -
Nginx本地局域网用上https和http2.0传输协议
一、安装Nginxnginx: download(安装Nginx直接解压便可以用)二、安装Openssl并生成证书文件1、下载地址http://slproweb.com/products/Win32OpenSSL.html;2、一直点下一步直接安装到C盘即可。命令提示行如果有以上提示,改环境变量或者到安装目录下执行,本人用安装目下执行3.生成证书1)执行以下语句,创建服务器私钥key文件genrs...原创 2020-12-23 22:00:14 · 1304 阅读 · 0 评论 -
前端(js)获取文件的头信息的16进制编码
正常我们做一些文件类型的判断辨别,低级别的鉴别就是根据文件扩展名判断。殊不知有些文件,有好事者喜欢直接修改扩展名,然后巧妙绕过扩展名过滤,轻则显示不正常,重则造成系统崩溃。接下我们了解一下根据文件的头信息的16进制编码进行判断文件类型,即使好事者修改扩展名依然可以判断原本类型。(文件头信息对照表)上代码:1.html<input type="file" name="excel" id="ex...原创 2021-04-19 16:51:22 · 2326 阅读 · 0 评论