哪个建站平台较好,做网站要付哪些钱,欧美农庄网站模板,网络销售营业执照经营范围背景最近公司项目不多#xff0c;比较清闲#xff0c;划水摸鱼混迹于各大技术博客平台#xff0c;瞬间又GET了好多前端技能#xff0c;一些属于技巧#xff0c;一些则是闻所未闻的冷知识#xff0c;一时间还消化不过来#xff0c;不由的发出一声感叹#xff01;前端可真…背景最近公司项目不多比较清闲划水摸鱼混迹于各大技术博客平台瞬间又GET了好多前端技能一些属于技巧一些则是闻所未闻的冷知识一时间还消化不过来不由的发出一声感叹前端可真是博大精深于是突发奇想现分类整理出来分享给大家也补充了一些平时的积累和扩展了一些内容俗话说独乐乐不如众乐乐大家一起来接受前端的洗礼吧论被玩坏了的前端HTML篇浏览器地址栏运行JavaScript代码这个很多人应该还是知道的在浏览器地址栏可以直接运行JavaScript代码做法是以javascript:开头后跟要执行的语句。比如javascript:alert(hello from address bar :));将以上代码贴到浏览器地址栏回车后alert正常执行一个弹窗神现。需要注意的是如果是通过copy paste代码到浏览器地址栏的话IE及Chrome会自动去掉代码开头的javascript:所以需要手动添加起来才能正确执行而Firefox中虽然不会自动去掉但它根本就不支持在地址栏运行JS代码sigh~浏览器地址栏运行HTML代码如果说上面那条小秘密知道的人还算多的话这条秘笈知道的人就要少一些了在非IE内核的浏览器地址栏可以直接运行HTML代码比如在地址栏输入以下代码然后回车运行会出现指定的页面内容。data:text/html,h1Hello, everybody!/h1浏览器秒变编辑器这个还是在浏览器地址栏上面做文章将以下代码复制粘贴到浏览器地址栏运行后浏览器就变成了一个原始简单的编辑器和window自带的notepad差不多长见识了吧话不多说我们来试试。data:text/html, html contenteditable归根结底多亏了HTML5中新加的contenteditable属性当元素指定了该属性后元素的内容成为可编辑状态。同理在控制台执行以下代码同样可以将整个页面变得可以编辑。document.body.contentEditabletrue;实时编写样式的输入框同理也是利用了HTML5中的contenteditable属性巧妙的在body增加一个可编辑的style标签。bodystyle styledisplay:block; position: fixed; contentEditablebody { background: red; }/style
/body利用a标签解析url很多时候我们有从一个URL中提取域名查询关键字变量参数值等的需要,然而处理 url 字符串是比较麻烦的可以使用 a 标签自动解析 url。主要方法就是在JS中创建一个a标签然后将需要处理的URL赋值给我们新创建的a标签的href属性然后就可以得到我们想要的东西了。var a document.createElement(a);
a.href https://juejin.cn/user/2796746682939054/posts;
console.log(a.host);利用这一方法稍微进行封装一下就可以得到一个非常实用的工具函数了下面提供一个网上常见的封装示例。function urlParse(url, key) {var a document.createElement(a)a.href urlvar result {href: url,protocol: a.protocol.replace(:, ),port: a.port,query: a.search,params: (function(){var ret {}, centArr,seg a.search.replace(/^?/, ).replace(/^?/,).split()for (i 0, len seg.length; i len; i ) {if (!seg[i]) { continue }centArr seg[i].split()ret[centArr[0]] centArr[1]}return ret}()),hash: a.hash,file: (a.pathname.match(//([^/?#])$/i) || [, ])[1],path: a.pathname.replace(/^([^/])/, /$1),relative: (a.href.match(/tps?://[^/](.)/) || [, ])[1],segments: a.pathname.replace(/^//, ).split(/)}a nullreturn key ? result[key] : result
}H5 有新的 API URL 也可以快速的处理一个链接var url new URL(https://www.baidu.com/)
url.hash
...带有 Id 属性的元素会创建全局变量在一张HTML页面中所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量这意味着document.getElementById像人的智齿一样显得多余了。但实际项目中最好还是老老实实该怎么写就怎么写毕竟常规代码出乱子的机会要小得多。div idtest/div
scriptconsole.log(test)
/scriptscript标签保存任意信息我们可以通过将script标签的type属性设置为text然后就可以在里面保存任意信息后面在js中获取信息也十分的方便。script typetext idtemplateh1欢迎光临/h1
/scriptvar text document.getElementById(template).innerHTMLCSS篇文字模糊效果只需要添加以下两行代码即可达到将文字模糊处理的目的。color: transparent;
text-shadow: #111 0 0 5px;我们这群人苦没有真正苦过爱没有用力爱过。 每天受着信息大潮的冲击三观未定又备受曲折。 贫穷不再是正义又妄图不让金钱成为唯一的追求。 过早看到了更大的世界勤奋却又不过三天。 热血透不过屏幕回忆止于游戏和工作。 像一群没有根的孩子在别人的经历和精神里吵闹。正常文字VS模糊文字是不是很酷哈哈哈。毛玻璃效果其实毛玻璃的模糊效果技术上比较简单只是用到了 css 滤镜filter中的 blur 属性。但是要做一个好的毛玻璃效果需要注意很多细节。下面提供一个简单示例.blur {display: block;width: 300px;height: 300px;margin: 100px auto;filter: blur(10px);
}img src./img/test.png classblur alt图片是我养的可爱的蓝胖子(●◡●)多重边框在css中我们可以利用重复指定box-shadow来达到多个边框的效果。/*CSS Border with Box-Shadow Example*/
div {box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);height: 200px;margin: 50px auto;width: 400px
}CSS中也可以做简单运算在日常开发中我们时常会遇到这样的需求左侧或者右侧宽度固定然后剩余部分自动充满。可能很多小伙伴会想到用flex布局通过设置flex:1;使其自动充满当然这个做法也是对的但是我们还有更为简便的方法那就是利用css的calc函数示例代码如下.container{width: calc(100% - 50px);
}calc() 函数用于动态计算长度值。需要注意的是运算符前后都需要保留一个空格例如width: calc(100% - 10px)任何长度值都可以使用calc()函数进行计算calc()函数支持 , -, *, / 运算calc()函数使用标准的数学运算优先级规则JS篇两个变量值的交换一般两个变量值交换大家首先想到的可能是通过一个中间变量进行转换但是其实还有更快的写法代码如下var a1, b2
a[b, ba][0]浮点数快速向下取整JavaScript中是没有整型概念的但利用好位操作符可以轻松处理同时获得效率上的提升。|0和~~是很好的一个例子使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。(12.4 / 4.13) | 0
// 3
~~(12.4 / 4.13)
// 3生成随机字符串生成随机字符串我们第一想到的可能是先定义一个字符串数组然后通过随机取数组中的字符进而拼接成一个随机长度的字符串。但是下面还有一个更简单的方法代码如下function generateRandomAlphaNum(len) {var rdmString ;for (; rdmString.length len; rdmString Math.random().toString(36).substr(2));return rdmString.substr(0, len);
}主要是利用了toString() 方法的特性什么情况下a a - 1咋一看这个全等式怎么看都是false但是万物存在既有理接下来让我们看看哪些情况下该等式是成立的呢。第一种情况就是Infinity或者可以说是正负Infinity。知识点: 在 JavaScript 里Infinity是一个 Number 类型的字面量表示无穷大。当一个 Number 类型的值在运算过程中超过了所能表示的最大值就会得到无穷大。let a Infinity;console.log(a a - 1); // truelet b -Infinity;console.log(b b - 1); // true那么还有没有其他情况下也成立呢或者说换成a a-1又有哪些情况成立呢欢迎各位大佬在下面评论区参与讨论。恶搞篇CSS恶搞大家猜测一下如果在代码中加上一下样式会是一个什么效果{cursor: none !important;
}(图片来源于网络如有侵权请联系我删除)console.log恶搞Chrome的console.log是支持对文字添加样式的甚至log图片都可以。于是可以重写掉默认的log方法把将要log的文字应用到CSS的模糊效果这样当有人试图调用console.log()的时候出来的是模糊不清的文字。好冷我表示没有笑。var _log console.log;
console.log function() {_log.call(console, %c [].slice.call(arguments).join( ), color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5););
};
console.log(你是逗逼吗)如果本篇文章有任何错误和建议欢迎大家指出作者monkeysoft链接https://juejin.cn/post/6901528736567394318来源掘金
