js 常用功能代码片集合

最新推荐文章于 2021-08-30 09:46:59 发布

想必是渣渣宇了

最新推荐文章于 2021-08-30 09:46:59 发布

阅读量241

点赞数

分类专栏： JS H5 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44205605/article/details/113886848

版权

JS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

本文展示了如何在React中实现一个使用HOOK的验证码倒计时按钮组件，以及如何解析URL参数，特别是提取特定参数如'token'。代码示例包括一个点击触发的倒计时功能，当倒计时结束后恢复原始文字。同时，提供了URL参数抓取的逻辑，用于在React应用中获取页面URL上的参数值。

摘要由CSDN通过智能技术生成

我将工具集合在了我自己的npm包内，此文章不再更新。

npm包地址：渣渣宇的开发工具包

Web

H5

验证码倒计时按钮

技术栈：react-HOOK

<div className="getCode" onClick={getCode}>
   {codeTxt}
</div>

const [codeTxt, setCodeTxt] = useState('获取验证码')
let timer
const getCode = () => {
    if(codeTxt !== '获取验证码') return
    startTime(60)
    function startTime(time) {
      setCodeTxt(time)
      if (time === 0) {
        clearTimeout(timer)
        let timer2 = setTimeout(() => {
          setCodeTxt('获取验证码')
          clearTimeout(timer2)
        }, 1000);
        return
      }
      timer = setTimeout(() => startTime(--time), 1000)
    }
}

地址栏抓参数

我一般用在react页面上，怎么用看自己

	console.log(window.location.href)
    // let url = window.location.href
    let url = 'http://localhost:3000/?token=tokens'
    if (url.slice(url.length - 2, url.length) === '#/') {
      url = url.slice(0, url.length - 2)
    }
    let token = null
    if (url.split('?')[1]) {
      let params = url.split('?')[1].split('&')
      for (let item of params) {
        let arr = item.split('=')
        switch (arr[0]) {
        // 需要抓什么参数自己加
          case 'token':
            token = arr[1] || 0
            continue
          default:
            continue
        }
      }
    }
    console.log(token)