javascript实现的小东西

Posted at 2019-08-21 笔记前端

1、javascript实现倒计时

实现的思路: 一个setInterval对象。在setInterval中将全局的时间变量减一，然后vue会触发页面更新。在渲染的时候将时间戳经过过滤器生成:小时:分钟:秒
的格式。

1.1 启动计时

startCount() {
  const intervalId = setInterval(() => {
    this.updateTime()
  }, 1000)
  this.intervalId = intervalId
},

1.2 时间更新函数

时间更新函数除了将全局的时间戳减一之外。还可以进行一些业务操作。比如说每隔一段时间的将数据发送到后台。

 updateTime() {
  // console.log('updated')
  this.remainTime = this.remainTime - 1
  if (this.remainTime === 0) {
    this.$message({
      type: 'warn',
      message: '考试结束时间到'
    })
    // 清空计时器
    clearInterval(this.intervalId)
    // 提交数据
    this.submit()
  }
},

1.3 时间戳过滤器

将整型的时间戳转换成时间hours:minutes:second格式

filters: {
  toDateStr: value => {
    let timestamp = value
    const hours = parseInt(timestamp / 3600)
    // console.log('小时:'+ hours)
    // 获得分钟时间戳
    timestamp = timestamp % 3600
    const min = parseInt(timestamp / 60)
    // console.log('分钟:'+min)
    timestamp = timestamp % 60
    // 获得秒数
    const second = timestamp
    return `${hours}:${min}:${second}`
  }
},

效果:

去除csdn登录框

(function() {
    'use strict';
    function clearBox(){
        var mark = document.getElementsByClassName("login-mark");
        var password = document.getElementById("passportbox");
        if (null !== mark[0] && mark[0] !== undefined){
            mark[0].parentNode.removeChild(mark[0]);
        }
        if (null !== password && undefined !== password) {
            password.parentNode.removeChild(password);
        }
    }

    setInterval(() => {
        clearBox();
    }, 500);
    // Your code here...
})();

知乎去除网页登录框

// ==UserScript==
// @name         知乎去除弹窗
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.zhihu.com/question/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    function clearBox(){
        let closeBtn = document.getElementsByClassName("Button Modal-closeButton Button--plain")[0];
        if (null !== closeBtn && closeBtn !== undefined){
            closeBtn.click();
        }
    }

    setInterval(() => {
        clearBox();
    }, 500);
    // Your code here...
})();

Previous post: spring踩坑日志 Next post: vue QRCode生成二维码

long blogs