卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › 小技巧!前端JS实现过滤指定内容~

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

坚果大叔
2021-01-15 15:04:40技术阅读 1,279

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"]
CSS JavaScript
赞赏 赞(2)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
高处,不一样的风景
上一篇
Holiday end~~
下一篇
今日天气
标签
CSS (16) Filter (2) Flex (2) Git (3) html (3) JavaScript (15) Jquery (2) JS (4) linux (2) localstorage (2) mac (1) map (2) mongoDB (1) python (3) set (2) vite (2) vue (9) websocket (1) wordpress (2) 二维码 (1) 傍晚 (2) 刷新页面 (1) 字符串 (5) 对象 (3) 小程序 (6) 年终 (1) 微信 (9) 微信机器人 (5) 总结 (1) 数据类型 (3) 数组 (5) 日常问题 (4) 服务器 (1) 朝阳 (1) 正则 (3) 生活 (6) 移动端 (2) 空地 (1) 组件 (1) 节流 (1) 记录 (3) 远方 (1) 防抖 (1) 验证码 (1) 高楼 (1)
近期文章
  • 微信小程序批量提交后台审核
  • 新年快乐🎉
  • Home
  • 随便转转!
  • 2022!充满魔幻的一年!
归档
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
  • 2012年12月
  • 2002年11月
微信小程序批量提交后台审核
2023-01-29 17:56:58
114 0 1
Home
2023-01-19 13:49:05
64 0 0
2022!充满魔幻的一年!
2022-12-31 21:09:51
140 0 0
小程序wx.showToast真机不显示?
2022-11-03 17:42:55
506 0 0
2
  • 2
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2023 卖坚果的怪叔叔. Designed by nicetheme.

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
225
文章
59
评论
159
喜欢