这是我参与「第五届青训营 」伴学笔记创作活动的第8天
今天在网学习了一些前段开发时会用到的技巧，在这里记录
浏览器地址栏运行JavaScript代码
javascript:alert('hello!');
- 在地址栏输入以上代码，即可看到实现效果（弹出hello文本框）；
- Firefox不支持；
- 其他浏览器必须手动输入才可执行；
浏览器地址栏运行HTML代码
地址栏输入：
data:text/html, <html contenteditable>
- 在非IE浏览器可以运行
浏览器变成文本编辑器
地址栏输入：
data:text/html, <html contenteditable>
- 修改地址指向
控制台输入：
document.body.contentEditable='true';
- 开启该页面的编辑功能
利用a标签自动解析URL
var a = document.createElement('a');
a.href = 'https://www.juejin.cn';
console.log(a.host); // www.juejin.cn
- 通过JS解析URL地址
页面拥有ID的元素会创建全局变量
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">我是内容</div>
<script type="text/javascript">
console.log(app.textContent) // 我是内容
</script>
</body>
</html>
- 通过ID控制元素
引用CDN文件时，不用HTTP标识
<script src="//cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.js"></script>
利用script标签保存任意信息
<script type="text" id="template">
<h1>This won't display</h1>
</script>
<script type="text/javascript">
const text = document.getElementById('template').textContent;
console.log(text); // <h1>This won't display</h1>
</script>
在页面中隐藏鼠标
*{
cursor: none!important;
}
- 使用!important把鼠标的效果禁掉
文字模糊效果
p {
color: transparent;
text-shadow: #111 0 0 5px;
}
- 通过加阴影的方式进行模糊处理
实时编辑CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
style{
display: block;
}
</style>
</head>
<body>
<style contentEditable>
body { color: blue }
</style>
</body>
</html>
实现长宽比固定区域
<div style="width: 100%; position: relative; padding-bottom: 56.25%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
this content will have a constant aspect ratio that varies based on the width.
</div>
</div>
禁止他人使用iframe标签引用网址
if (window.location != window.parent.location) window.parent.location = window.location;
浮点数转化为整数
console.log(~~1.2); // 1
