小技巧!前端JS实现过滤指定内容~

简介: 小技巧!前端JS实现过滤指定内容~

1、JS实现验证码倒计时

/*点击获取验证码*/
$(".addCode").click(function(event) {
var addCode = $(".addCode")
    verificationCode(addCode);
});
/*验证码的方法*/
function verificationCode(name) {
var num = 20;
var timer = setInterval(function() {
        num--;
        name.attr("disabled", "disabled").html(num + '秒后重试');
if (num == 0) {
            clearInterval(timer);
            name.attr("disabled", false).html("重新获取");
        }
    }, 1000)
}

2、CSS实现文字分散对齐

注意:只支持高版本Chrome浏览器

text-align-last:justify;
text-align:justify;
text-justify:distribute-all-lines;

3、JS过滤指定内容

function replaceText(words) {
let text = '你是个傻逼,我才不想你这个傻逼呢。大傻逼!'
for (var i = 0; i < words.length; i++) {
document.body.innerHTML = text.replace(new RegExp(words[i], 'ig'), '**');
    };
}
const words = ['傻逼']; // 敏感词
replaceText(words)
// 你是个**,我才不想你这个**呢。大**!

4、Div跟随另外一个Div高度自适应

// 最外层设置CSS
display: flex;
align-items: center;
flex-direction: column;

5、JS随机从数组中取指定值

let groups = ['1','2','4','5','6','7','8','9','10'];

1.从数组groups中随机取出一个值

let value = groups[Math.floor(Math.random()*groups.length)];
value  // 10

2.随机从数组中随机取几个值

getRandomArrayValue(arr, num) {
var sData = arr.slice(0), i = arr.length, min = i - num, item, index;
while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        item = sData[index];
        sData[index] = sData[i];
        sData[i] = item;
    }
return sData.slice(min);
}
getRandomArrayValue(groups, 4)
// ["7", "8", "10", "2"]
相关文章
|
8天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
6天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
9天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
23 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
10天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
15 2
前端JS读取文件内容并展示到页面上
|
9天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
25 4
|
9天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
13 2
|
13天前
|
JavaScript 前端开发 开发者
基于Vue.js的前端框架有哪些?
Vue.js 是一款流行的前端 JavaScript 框架,用于构建单页面应用(SPA)。除了 Vue.js 本身,还有许多基于 Vue.js 的前端框架和 UI 库,它们提供了更多的功能和组件,以便开发者能够快速构建应用程序。
19 6
|
8天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
8天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
9天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴
下一篇
无影云桌面