前端开发中这些小技巧

最新推荐文章于 2024-04-19 09:20:46 发布

公孙元二

最新推荐文章于 2024-04-19 09:20:46 发布

阅读量183

点赞数

分类专栏：个人笔记/备忘录文章标签：前端 javascript html

原文链接：https://juejin.cn/post/6970215963023114271

版权

个人笔记/备忘录专栏收录该内容

104 篇文章 4 订阅

订阅专栏

浏览器变成文本编辑器

地址栏输入：

data:text/html, <html contenteditable>

利用a标签自动解析URL

var a = document.createElement('a');
a.href = 'https://www.maomin.club';
console.log(a.host); // www.maomin.club

页面拥有ID的元素会创建全局变量

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="app">我是内容</div>
<script type="text/javascript">
	console.log(app.textContent) // 我是内容
</script>
</body>
</html>

引用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;
}

文字模糊效果

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>

实时编辑html

<!DOCTYPE HTML>
<html>
<body>

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

</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;

生成随机字符串

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

浮点数转化为整数

console.log(~~1.2); // 1

公孙元二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发中这些小技巧

浏览器变成文本编辑器地址栏输入：data:text/html, <html contenteditable>利用a标签自动解析URLvar a = document.createElement('a');a.href = 'https://www.maomin.club';console.log(a.host); // www.maomin.club页面拥有ID的元素会创建全局变量<!DOCTYPE html><html><head>
复制链接

扫一扫