笔记

fangfang | input的type属性设为number后可以输入e

发布于 12-09 10:16 浏览:13 类型: 转载 - 随笔 分类:JavaScript 举报

<p><strong>原因:e在数学上代表2 71828,所以它也还是一个数字< strong>< p><p><strong>解决方法:< strong>< p><pre><code class="language-javascript">&lt;input type=number onkeypress=return( [ d] test(String fromCharCode(event keyCode))) &gt;< code>< pre><p><strong>2 input数字number类型的时候maxlength无效< strong>< p><p><strong>解决方法:超出截取< strong>< p><pre><code class="language-javascript">&lt;input type="number" oninput="if(value length&gt;11)value=value slice(0,11)" &gt; < code>< pre><p>&nbsp;< p>

fangfang | 手把手带你入门前端工程化——超详细教程

发布于 11-13 09:41 浏览:27 类型: 转载 - 随笔 分类:JavaScript 举报

<p>本文将分成以下 7 个小节:< p><ol><li><p>技术选型< p>< li><li><p>统一规范< p>< li><li><p>测试< p>< li><li><p>部署< p>< li><li><p>监控< p>< li><li><p>性能优化< p>< li><li><p>重构< p>< li>< ol><p>部分小节提供了非常详细的实战教程,让大家动手实践。< p><p>另外我还写了一个前端工程化 demo 放在&nbsp;github&nbsp;上。这个 demo 包含了 js、css、git 验证,其中 js、css 验证需要安装 VSCode,具体教程在下文中会有提及。< p><p><strong>技术选型< strong>< p><p>对于前端来说,技术选型挺简单的。就是做选择题,三大框架中选一个。个人认为可以依据以下两个特点来选:< p><ol><li><p>选你或团队最熟的,保证在遇到棘手的问题时有人能填坑。< p>< li><li><p>选市场占有率高的。换句话

1292150917q | 侧方发F违法违法而我

发布于 10-21 09:09 浏览:18 类型: 原创 - 教程 分类:JavaScript 举报

<p>&lt;script&gt;alert(&quot;侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我侧方发F违法违法而我&quot;)&lt; script&gt;< p>

1292150917 | 部署Node管理后台遇到的几个问题

发布于 08-24 16:27 浏览:32 类型: 原创 - 教程 分类:JavaScript 举报

<p>写在前面< p><p>核心服务扩容,之前预定分配给node管理后台用的服务器不能用了。< p><p>不得不重新申请了一台服务器部署,结果部署成功后业务一直运行不起来,花了3天才排查到原因,真是尴尬。< p><p>这里记录一下,留作备忘。< p><p>背景信息< p><p>开始安装又卸载node的操作直接导致了后续业务运行失败,当然这是后话了< p><p>部署流程: 申请服务器 -> 配置CI和发布系统 -> 服务器安装node10 -> 兼容性考虑卸载node10 -> 安装node7 -> 发布业务< p><p>问题一: CI打包文件过期,发布失败< p><p>进入发布系统配置gitlab的发布分支,本以为这样就ok了,结果居然发布失败 - -!< p><p>查发布日志发现<code>Request failed with status code 404< code>< p><p>排查过程< p><ol><li>查看gitla

fangfang | axios取消请求,取消前面一个或多个请求

发布于 04-21 22:27 浏览:128 类型: 转载 - 随笔 分类:JavaScript 举报

<p>有时候我们常常在发起一个请求时,希望取消前面的一个或多个请求,就要使用axios的一个方法CancelToken(), 配置方法如下。< p><p>在拦截器全局设置,用来取消所有请求:< p><pre><code class="language-javascript">import axios from "axios"; window axiosCancel = [] 全局定义一个存放取消请求的标识const Axios = axios create({ baseURL:"", timeout: 10000, }); 请求前拦截Axios interceptors request use(config => { return config 添加取消标记 config cancelToken = new axios CancelToken(cancel => { window axiosCancel push({ cancel }) },function(error) {

fangfang | 深入理解Babel原理及其使用

发布于 04-21 22:31 浏览:35 类型: 转载 - 随笔 分类:JavaScript 举报

<p><span style="font-size:16px">本文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下如何实现的。< span>< p><p><strong>知识点如下:< strong>< p><p>&nbsp; &nbsp; &nbsp; &nbsp;1、babel是什么< p><p>  2、javascript制作规范< p><p>  3、babel转译器< p><p>  4、babel的使用< p><p>  5、常见的几种babel转译器和插件< p><p>  6、babel最常见配置选项< p><p>  7、babel的其他< p><p>  8、在webpack中使用babel< p><p>  9、总结< p><p><span style="font-size:18px"><strong>1、babel是什么< strong>< span>< p><p>babel官网正中间一行黄色大字写着“babel is a javascript compiler”,翻译一下就是babel是一个javascript

bluemeng | js删除JSON中的空字符串字段和空对象。

发布于 04-18 22:08 浏览:190 类型: 原创 - 随笔 分类:JavaScript 举报

<pre><code class="language-javascript">function deleteEmptyProperty(object){ for (var i in object) { var value = object[i]; if (typeof value === object) { if (Array isArray(value)) { if (value length == 0) { delete object[i]; continue; } } this deleteEmptyProperty(value); if (this isEmpty(value)) { delete object[i]; } } else { if (value === || value === null || value === undefined) { delete object[i]; } else { } } }}function isEmpty(object) { for (var name in object) { return false; } return true;}< code>< pre><p>&nbsp;< p>

hulan | HTML5写的一个小游戏《彩色球大作战》

发布于 07-30 22:51 浏览:65 类型: 原创 - 随笔 分类:JavaScript 举报

<pre><code class="language-html"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>球球大作战< title> <style type="text css"> *{ margin: 0; padding: 0; } round{ width: 40px; height: 40px; background-color: 4bda4c; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-top: -10px; margin-left: -

hulan | 闲着写了一个扫雷

发布于 07-30 22:50 浏览:23 类型: 原创 - 随笔 分类:JavaScript 举报

<p>没做左右键功能 应该还有bug 欢迎指出<strong>html 代码< strong>< p><pre><code class="language-javascript"><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>扫雷< title> <style> body,div,dl,dt{ padding: 0; margin: 0; } body{ text-align: center; } main{ display: inline-block; border:10px solid c0c0c0; } panel{ ma

hulan | 又发现了一个以前写的游戏 也一起发上来

发布于 07-30 22:49 浏览:27 类型: 原创 - 随笔 分类:JavaScript 举报

<pre><code class="language-javascript"><!DOCTYPE html><html><head> <title>< title> <style type="text css"> *{ margin: 0; padding: 0; } content{ position: relative; margin: 0 auto; width: 640px; background-color: 000; } canvas{ position: absolute; } main{ top: 145px; left: 0; } quan{ top: 700px; left: 0; } current{ top: 740px; left: 225px; }

hulan | 原来桃心是这样画出来的

发布于 07-30 22:48 浏览:18 类型: 原创 - 随笔 分类:JavaScript 举报

<pre><code class="language-javascript"><!DOCTYPE html><html> <head> <title>桃心是这样画出来的< title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text html; charset=UTF-8"> <style> body{ background-color:rgba(255,165,0, 2); } div{ background-color:tomato; width:100px; height:100px; position:relative; top:100px; left:50%;

hulan | 打五颜六色柚子

发布于 07-30 22:42 浏览:83 类型: 原创 - 随笔 分类:JavaScript 举报

打五颜六色的柚子< strong>< p> Document< title>< head> * { margin: 0; padding: 0; } body { overflow: hidden; background-color: ccc; } balloon { width: 160px; height: 160px; background-color: FAFA26; border-radius: 160px 160px 64px 160px; *气球四角* transform: rotate(45deg); *顺时针旋转45°* box-shadow: -8px -8px 80px

hulan | 魔性催眠图形

发布于 07-30 22:41 浏览:106 类型: 原创 - 随笔 分类:JavaScript 举报

canvas的ellipse是个很棒的方法,可惜只有chrome和Opera支持把ellipse中参数随便改改就会出现神奇的效果< p>html 代码< strong>< p> Document< title>< head> body{overflow:hidden}< style> < canvas>< body>< html><script> var canvas=document querySelector(canvas), ctx=canvas getContext(2d); canvas width=window innerWidth;

hulan | 星星爱消除

发布于 07-30 22:36 浏览:65 类型: 原创 - 随笔 分类:JavaScript 举报

有感于昨天一哥们的消除游戏,我也做了个。麻烦大家指正代码片段 1< strong>< p> Star Clearing!< title> body,ul{ margin: 0; padding: 0; } img{ border: 0; } gameBox{ position: relative; width:447px;

hulan | 太阳地球月亮运行动画

发布于 12-20 14:21 浏览:101 类型: 原创 - 随笔 分类:JavaScript 举报

<pre><code class="language-html"><!DOCTYPE html><html><head><meta charset="utf-8"><title>< title> <meta name="viewport" content="width=device-width, initial-scale=1"><script src="https: cdn static runoob com libs jquery 1 10 2 jquery min js">< script><style type="text css">body{background: 000;} sun{width: 280px;height: 280px;margin-top: 200px;margin-left: 300px;border:1px solid FFA500; background: FFA500;border-radius: 50%; box-shadow:0px 0px 35px FFA500;animation:action 10s;animation-iteration-count:infinite;animation-timing-function:linear;}@keyframes action{0% { transform:

boume | 轮播图 - 原生js - 原理

发布于 12-14 14:09 浏览:96 类型: 原创 - 随笔 分类:JavaScript 举报

<p>轮播图需要有的功能&darr;<br >a:鼠标不参与时图片需要自己播放(定时器 + 切换下一个)<br >b:鼠标移入图片停止播放(清除定时器)<br >c:鼠标移出图片恢复自动播放(清除之前的自动播放,重新开启自动播放!)<br >d:图片变化的情况下相应的按钮会发生样式的变化<br >e:鼠标点击按钮,图片停止播放,同时切换到与按钮对应的图片上,同时按钮的样式发生变化<br >f :鼠标移出按钮图片恢复自动播放(onmouseout)<br >g:鼠标点击左右按钮,轮播图切换(onclick)<br >h:底部按钮数量可随着图片的数量改变<br ><br >先分析一下,需要设置哪些函数&darr;<br >1 自动播放的定时器 - timer(包含nextfn)<br >2 清除定时器 - cleartimer(包含timer)<br >3 清除之前的自

boume | JavaScript兼容性

发布于 12-13 18:04 浏览:77 类型: 原创 - 随笔 分类:JavaScript 举报

常见的JavaScript兼容性及解决方案整理:< span>1 选择器兼容性< strong>< span>  getElementsByClassName  ( IE9以及以上支持)< span>< span>  querySelector querySelectorAll (IE8以及以上支持)< span>< span>2 获取计算后的样式< strong>< span>  getComputedStyle (IE9以及以上支持)< span>< span>

boume | canvas炫酷粒子动画+粒子连线+鼠标捕捉控制

发布于 12-13 16:20 浏览:116 类型: 原创 - 随笔 分类:JavaScript 举报

Title< title>< head> *{ margin:0; padding:0; } canvas{ display: block; background-color: 000; }< style>< canvas>< body>< html><script> var canvas = document getElementById(canvas); var cxt = canvas getContext(2d); var yz = {num: 300, data: [], w: window innerWidth, h: window innerHeight, move: [], speed: 2, distance: 60}; canvas width = yz w; canvas height

boume | 一行代码教你写打字机效果

发布于 12-13 16:15 浏览:77 类型: 原创 - 随笔 分类:JavaScript 举报

<pre><code class="language-html"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document< title> <style> @keyframes typing from width: 0 @keyframes blink-caret 50% border-color: transparent h1 font: bold 200% Consolas, Monaco, monospace border-right: 1em solid width: 16 5em fallback width: 30ch of chars margin: 2em 1em white-space: nowrap overflow: hidden animation: typing 20s steps(30, end), of steps = of chars blink-caret 5s step-end infinite alternate < style>< head><body><h1>Typing animation by Lea Verou < h1>< body>< html>< code>< pre><p> < p>

boume | 谁说不苦逼,看ie兼容怎么解?

发布于 12-12 21:46 浏览:50 类型: 原创 - 随笔 分类:JavaScript 举报

兼容 什么鬼?只想说,无知,是最幸福的。因为在浏览器的世界,从来就没有和谐这个词。除非 把ie炸了。哈哈!既然干不动,那就只能老老