参考
https://my.oschina.net/senit/blog/743163
和本地localstorage置换时间的验证码计时器
拆除jquery做到不依赖第三方库

for example
在react中使用

  2. const codeTimer = function (el:HTMLElement, wait:number) {
  3.   this.el = el
  4.   this.wait = wait
  5.   this.load = () => {
  6.     //获取缓存中的值
  7.     let timers = this.getLocalDelay();
  8.     if (timers.lastname == null || timers.lastname == 0) {
  9.       this.el.innerHTML = '获取验证码'
  10.       this.wait = wait
  11.       return;
  12.     }
  13.     if (timers.lastname > 0) {
  14.       this.el.style.color = 'gray'
  15.     }
  16.     this.el.innerHTML = "剩余(" + timers.lastname + ")秒"
  17.     let timer = setInterval( () => {
  18.       if (timers.lastname > 0) {
  19.         timers.lastname--;
  20.         this.el.style.color = 'gray'
  21.         this.el.innerHTML = "剩余(" + timers.lastname + ")秒"
  22.         this.setLocalDelay(timers.lastname);
  23.       } else {
  24.         clearInterval(timer);
  25.         this.el.style.color = 'orange'
  26.         this.el.innerHTML = '获取验证码'
  27.         this.wait = wait
  28.       }
  29.     }, 1000);
  30.   }
  32.   this.time = () => {
  33.     this.setLocalDelay(this.wait);
  34.     if (this.wait == 0) {
  35.       this.el.style.color = 'orange'
  36.       this.el.innerHTML = '获取验证码'
  37.       this.wait = wait
  38.       this.setLocalDelay(this.wait);
  39.     } else {
  40.       let timer = setInterval( () => {
  41.         console.log(el);
  42.         if (this.wait > 0) {
  43.           this.wait--;
  44.           this.el.style.color = 'gray'
  45.           this.el.innerHTML = "剩余(" + this.wait + ")秒"
  46.           this.setLocalDelay(this.wait);
  47.         } else {
  48.           clearInterval(timer);
  49.           this.el.style.color = 'orange'
  50.           this.el.innerHTML = '获取验证码'
  51.           this.wait = wait
  52.         }
  53.       }, 1000);
  54.     }
  55.   }
  57.   this.setLocalDelay = (time) => {
  58.     //location.href作为页面的唯一标识，可能一个项目中会有很多页面需要获取验证码。
  59.     localStorage.setItem("lastname" + location.href, time);
  60.   }
  63.   this.getLocalDelay = () => {
  64.     const LocalDelay: any = {};
  65.     LocalDelay.lastname = localStorage.getItem("lastname" + location.href);
  66.     return LocalDelay;
  67.   }
  69. }
  72. // 使用
  74. let mCodeTimer
  75. export default class Login extends Component<LoginProps> {
  76.   componentDidMount() {
  77.     const btn = document.querySelector('#get_verify_code_btn') as HTMLElement
  78.     mCodeTimer = new codeTimer(btn, 10)
  79.     mCodeTimer.load()
  80.   }
  82.   render() {
  83.     <span onClick={() => {
  84.           mCodeTimer.time()
  85.         }} 
  86.       id="get_verify_code_btn">
  87.       获取验证码
  88.     </span>
  89.   }
  90. }

参考

https://my.oschina.net/senit/blog/743163