55个JS代码让你轻松当大神

本文从简单到复杂列出了前端常用的一些代码段。善用这些代码可以让你的代码更高雅，别人更难懂。你就是公司的护城河，你就是前端的顶梁柱。

  1. 数组平铺。这是一个很实用的让复杂的数组快速变成一个常用数组的技巧。arr参数不管是一维数组还是多维数组，经过转变之后最终都会变成一维数组。
  1. 手动延时xx毫秒。在异步请求编程中，有时候要用到让进程等待的情况，用这个函数可以设定等待多少毫秒。
  1. 把数组内容随便换个位置。可以用来生成随机位置的内容，比如洗牌这种场景。
  1. 数组去重。原理就是先转成Set对象，自动去掉重复的部分，再转回数组。
  1. 一键给网页上边框。常用于调试的时候，看一下DOM的框是不是自己要的，其中颜色是随机生成的。也可以自己改一下变成固定颜色的边框。

效果如下：

6. 一键查看密码。同理也可以自己修改，这里用代码的方式来查看。原理是input框虽然是type=password的，但是内容并没有加密，只要换成text就会正常显示。

  1. 一键去掉鼠标的图标，让人摸不着头脑的操作。一般用于防止别人调试自己的网页。
  1. 检查一个日期是否是在周末。常用于判断当前日期是否是周末，一般场景下还会叠加一个判断是否节假日。
  1. 检查一个日期是否在某个年份内。通过获取参数日期的年和需要比较的日期的年来进行比较。如果年的参数比较规范，可以不转一次Date对象，直接比较即可。
  1. 检查日期是否是一个有效日期。原理是用参数来创建日期，看日期是否有效。
  1. 计算两个日期之间的时间间隔。这里计算的是天，也可以自己改成其他的。
  1. 获取日期从年初到现在入参有多少天。入参是Date对象，通过比较获得时间差，默认是毫秒。这里除以一天的毫秒数获得了天数。
  1. 返回日期的时间部分，并设置格式为hh:mm:ss的形式。
  1. 把字符串的首字母大写。有时候网页展示的时候会用得到。
  1. 字符串反转。一般没啥用，看看就行。以前面试的时候会用的到。
  1. 生成随机字符串，各种随机基本都是这个原理。
  1. 按照参数阶段字符串的长度，如果长度不够就不截取。一般代码中自己写也行，但是要多写一个逻辑判断。
  1. 删除字符串中的HTML内容。一般情况下用来防止富文本内容中注入了js代码、去掉不需要的内容等。
  1. 判断一个数组是否为空。这里一方面是判断是否为数组，另一方面是判断数组内容。
  1. 数组合并，两个数组合并成一个数组。下面是两种方法，都有用，只是用到的语法不同。
  1. 判断数字是奇数还是偶数，同理还可以判断是否可以被3整除之类的。
  1. 计算一组数字的平均值。具体就是所有数字相加再被数量除一次。
  1. 获得一个随机数。第一个是从0开始到数字之间，第二个是两个数字之间。注意最后的加法是独立算数，修改的时候别改错地方了。
  1. 按照指定位数四舍五入。如果没有要求，第二种也是很好用的。
  1. 获取一个随机颜色。
  1. 使用浏览器的原生API复制内容到剪贴板。有的浏览器可能有兼容问题。
  1. 清除Cookie。老方法了，可以挨个清除cookie的内容。
  1. 使用浏览器原生的API获得用户框选的文本内容。
  1. 检查当前环境是否黑暗模式。CSS的检查也是这个原理。

30.让页面返回浏览器顶部。

  1. 检测当前标签页是否处于激活模式。
  1. 检测当前设备是否苹果设备。同理还有微信浏览器、支付宝浏览器等。
  1. 判断当前页面是否在底部了。
  1. 打开浏览器的打印模式。
  1. 检测一个对象是否为空。
  1. 前端自己生成18位的UUID。用到的时候就用到了，一般情况下用不到，哈哈。
  1. RGB形式的颜色转成16进制的颜色。
  1. HEX形式的颜色转RGB形式的颜色。
  1. 网易音乐的web端启用下载功能（标准音质）。
  1. 前端自己计算内容的SHA256值。
  1. 浅拷贝。简单使用场景下的方式。
  1. 深拷贝。多层级下的内容都可以处理到。function不行，那个要单独处理。
  1. 自己实现一个单向链表。面试的时候会用到，一般情况下有这个思维就可以了。
  1. 自定义方式的数组排序。
  1. useMap。实现一个自动处理Map对象的hook。
  1. useSet。实现一个自动处理内部数据的Set对象。
  1. useDefault。有内容使用设置的内容，没有内容使用默认的内容。
  1. useMergeState。实现一个合并内容的对象，常见对象的自动更新。
  1. useDebounce。实现一个React的防抖。
  1. useForm。实现一个React的Form对象，自动管理Form内容。
  1. useEventListener。实现一个自动监听函数，可以监听鼠标移动。
  1. useKeyPress。实现一个键盘对应的键的事件监听函数。
  1. useHover。实现一个鼠标悬停事件的监听函数。
  1. useRequestAnimationFrame。实现一个RequestAnimationFrame函数在React中使用的方法。
  1. useBodyScrollLock。实现一个自动锁定滚动条的函数。一般弹窗会用的上。

免费JS富文本编辑器 总有一款会适合你

作者:极客小俊

一个把逻辑思维转变为代码的技术博主

概述: javascript Text Editor

我们平常在页面上写文章 或者 后台发布文章内容、或内容描述等、一直都是用的是富文本编辑器,包括很多论坛发帖的文字窗口也是典型的富文本编辑器, 它跟office中的word界面非常类似!

富文本编辑器的使用是与word非常类似的,所见即所得的排版方式,操作也与word类似，点击鼠标使用相应功能就行,对用户而言使用上相对比较简单，也比较容易进入状态!

如图

总的来说富文本编辑器就是一种基于JS并且可内嵌于web浏览器中所见即所得的文本编辑器!

富文本编辑器不同于普通的文本编辑器，开发者可到网上下载免费的富文本编辑器内嵌于网站应用程序里面, 那么作为一个开发者，熟悉几款富文本编辑器是很有必要的，说不一定某个项目就要集成进去,到时候现就不会去花太多时间研究它!

下面列举几款常用的富文本编辑器,供大家参考!

概述

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等, 并且界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。

支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。

而且这么好的东西还是开源免费的，而且一直有人维护，这款编辑器使用的人非常多 , TinyMCE自带的大部分插件均提供社区开源版，可免费使用且可商用!

下载

下载地址: https://www.tiny.cloud/

使用参考: http://tinymce.ax-z.cn/

根据需要下载社区版或者开发版

小提示

开发版包含未被压缩过的源码，方便开发者学习分析, 也就是说开发版包含TinyMCE社区版，开发工具和完整的源代码!

快速使用

步骤1：引入TinyMCEJS脚本

在<head>中插入如下代码，注意自己的项目路径, 将tinymce.min.js源文件引入至项目中

步骤2: 初始化TinyMCE, 将TinyMCE初始化为页面的一部分

当引用了TinyMCE.js后就可以使用tinymce.init()方法来进行初始化了，并且tinymce.init()方法内部接收一个初始化对象, 内部包含各种参数，必须的参数就是selector意思是允许通过css选择器指定TinyMCE要绑定的html内容容器，传统模式需指定textarea，内联模式可指定div或其它html块元素

举个栗子

效果如下

注意:

当然这里建议新手还是使用textarea元素, TinyMCE会将内容塞进textarea元素，可以通过正常的post方法获取到编辑器中的内容, 如果你使用第三方框架或采用其他元素配合ajax提交则可能不会主动触发内容同步，需要自己执行同步 或者 自己执行dom操作来获取内容!

概述

Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万，它是在非常著名的FCkEditor基础上开发的新版本。Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。

官方地址: https://ckeditor.com/

使用参考: https://ckeditor.com/docs/index.html

下载

点击下载按钮

根据需要下载

快速使用

步骤1：引入CkeditorJS脚本

在<head>中插入如下代码，注意自己的项目路径, 将ckeditor.js源文件引入至项目中

步骤2: 初始化Ckeditor

CKEditor就像一个在你网页中的文本区域一样工作，它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果，并不容易。实际上CKEditor就是使用一个文本区域来传递它的数据到服务器上，所以，你必需在页面上创建一个文本容器，这里建议使用<textarea></textarea>。

引用ckeditor.js后就可以使用ClassicEditor.create()来进行创建编辑器，ClassicEditor.create()内部参数为指定的Ckeditor要绑定的文本容器。

举个栗子

效果如下

概述

wangEditor 是一款使用 Typescript 开发的无框架依赖Web 富文本编辑器， 轻量、简洁、易用、开源免费。

它兼容常见的 PC 浏览器：Chrome，Firefox，Safar，Edge，QQ 浏览器，IE11。但是不支持移动端。

下载地址：https://www.wangeditor.com/

使用地址：https://www.wangeditor.com/doc/

下载

进入到以下页面

我们只需要将wangEditor.js或者wangEditor.min.js这两个文件拿出来就行了。

快速使用

步骤1：引入wangEditorJS脚本

在<head>中插入如下代码，注意自己的项目路径, 将wangEditor.js或者wangEditor.min.js源文件引入至项目中

步骤2: 初始化wangEditor

你需要在页面上创建一个文本容器，然后利用以下代码就可以实现这个编辑器了。

举个栗子

效果如下

概述

KindEditor是一套使用JavaScript编写的开源的HTML可视化编辑器，让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor非常适合在CMS、商城、论坛、博客、电子邮件等互联网应用上使用。

下载地址：http://kindeditor.net/down.php

使用地址：http://kindeditor.net/docs/index.html

下载

快速使用

步骤1：引入KindEditorJS脚本

在<head>中插入如下代码，注意自己的项目路径, 将kindeditor-all-min.js或者kindeditor-all.js源文件引入至项目中,并且还要将文件夹lang的zh-CN.js引入到项目中，如下：

步骤2: 初始化KindEditor

在需要显示编辑器的位置添加textarea输入框。注意必须给textarea设置一个id或者类class选择器，建议使用id选择器，因为id选择器是页面独一无二的，而类class选择器可以存在多个，容易产生混乱。

举个栗子

效果如下

概述

Simditor是Tower平台使用的富文本编辑器，是一款基于jQuery和module.js，轻量化开源的编辑器，界面简约，功能实用，插件不是很多，功能要求不高的可以使用。支持的浏览器：IE10+、Chrome、Firefox、Safari。

下载地址：https://github.com/mycolorway/simditor/releases

使用地址：https://simditor.tower.im/docs/doc-usage.html

下载

快速使用

步骤1：引入Simditor相关的JS与CSS文件

在<head>中插入如下代码，注意自己的项目路径, 将以下文件引入到项目中，如下：

以上文件除了jQuery.min.js需要单独下载外，simditor.css、module.js、hotkeys.js、simditor.js 到你下载的Simditor中的site/assets文件夹中去找。还要注意js文件的引入顺序，Simditor是基于jQuery和module.js，所以要引入到simditor.js之前。

步骤2: 初始化Simditor

要使用 Simditor，首先你需要一个textarea这样的元素，并且给textarea设置一个id选择器。

举个栗子

效果如下

概述

Summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。它是基于jquery和bootstrap，使用前先引入这两项。

下载地址：https://summernote.org/

使用地址：https://summernote.org/getting-started/#get-summernote

下载

快速使用

步骤1：引入Summernote相关的JS与CSS文件

在<head>中插入如下代码，注意自己的项目路径, 将以下文件引入到项目中，如下：

步骤2: 初始化Summernote

在你希望页面中呈现 Summernote 编辑器的位置设置一个文本容器，并且给文本元素设置一个id选择器。

举个栗子

效果如下

概述

Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。

下载地址：https://quilljs.com/docs/download/

使用地址：https://quilljs.com/docs/quickstart/

注意：Quill的使用文档是英文的，英语不好的可以借助翻译软件！！！！

下载

进入一下页面

快速使用

步骤1：引入Quill相关的JS与CSS文件

在<head>中插入如下代码，注意自己的项目路径, 将以下文件引入到项目中，如下：

步骤2: 初始化Quill

在你希望页面中呈现 Quill 编辑器的位置设置一个文本容器，并且给文本元素设置一个id选择器。

举个栗子

效果如下

以上的JS编辑器的详细使用请参照官方以及相关文档，根据你的项目需求，挑选出适合的富文本编辑器，希望对你有所帮助！！

谢谢您的阅读！!

\”点赞\” \”评论\” \”收藏\”

大家的支持就是我坚持创作下去的动力!​

​如果以上内容有任何错误或者不准确的地方，欢迎在下面 留个言指出、或者你有更好的想法，欢迎一起交流学习​

ztext – 简单几行代码创建酷炫3D特效文字的开源JS库

把网页上的文字变成酷炫的 3D 风格，还能制作旋转动效，有了 ztext.js，只需要几行代码。

ztext 能做什么

ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库，让开发者能通过非常简单的 api 创造出酷炫的 3D 文字效果。配合 CSS 动画，可以实现惊艳酷炫的交互效果。

ztext 官网文档截图

ztext.js 库的特点

  • 轻量无依赖，支持原生 javascript 和在 Vue / React 中安装使用
  • 性能强劲，兼容性强。基于 CSS 的 transform-style 属性实现，超过98%用户的浏览器都支持，而且用于 CSS transform 的动画性能很高
  • 功能强大，适用范围广。不仅适用于任何中西文字体，还支持图片/ svg / Emoji 表情符号

支持图片/svg/表情符号

开发上手体验

在开发 PC 端展示型的页面或应用时，运用合适的特效，能让呈现效果印象深刻。把 banner 上的标题变成 3D，搭配设计精美的元素，是一个很见的需求。而常规的方法是使用 canvas，前端需要加载几M大小的 WebGL 库，折腾数小时才能实现。

ztext.js 就是一个适用于这样场景的 js 库，压缩版本大小仅3.8kb，api 也非常简单，而且官网有详细的代码例子，甚至不需要有太扎实的代码基础，copy 改改就能用，快速创建酷炫的 3D 文字特效。配合鼠标悬停的交互，着实能为产品增色不少。

ztext.js 实现 3D 文字的原理

ztext.js 并没有引入真正的第三方 3D 库来实现三维视图，而是通过从 HTML 元素创建图层，来给人一种立体的错觉，基于 CSS 的 transform-style 属性来还原 3D ，视觉效果非常好，作为用户没有发现任何区别，而且很容易结合 CSS3 动画来使用，能够随时调整角度，非常喜欢这种简单酷炫的方式。

免费开源说明

ztext.js 基于 MIT 开源协议在 Github 上开源，任何人都可免费下载用在自己的项目，包括商业用途。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科