js实现动态显示时间

实现动态显示时间的步骤：1、获取本地当前时间。2、使用定时器。3、离开时清除定时器。（本项目是以react为基础实现的，同理在普通的html中实现方式一样）

1、获取本地当前时间方法写在一个名叫CommonMethod.js的文件里，代码如下：

import React from 'react';

//type为1时输出20181126103245，否则输出2018年10月26日|星期一|11:26:45
const showLocaleTime = (type) =>{
  var objD = new Date();
  var str,colorhead,colorfoot;
  var yy = objD.getYear();
  if(yy<1900) yy = yy+1900;
  var MM = objD.getMonth()+1;
  if(MM<10) MM = '0' + MM;
  var dd = objD.getDate();
  if(dd<10) dd = '0' + dd;
  var hh = objD.getHours();
  if(hh<10) hh = '0' + hh;
  var mm = objD.getMinutes();
  if(mm<10) mm = '0' + mm;
  var ss = objD.getSeconds();
  if(ss<10) ss = '0' + ss;
  var ww = objD.getDay();
  if  ( ww==0 )  colorhead="<font color=\"red\">";
  if  ( ww > 0 && ww < 6 )  colorhead="<font color=\"red\">";
  if  ( ww==6 )  colorhead="<font color=\"red\">";
  if  (ww==0)  ww="星期日";
  if  (ww==1)  ww="星期一";
  if  (ww==2)  ww="星期二";
  if  (ww==3)  ww="星期三";
  if  (ww==4)  ww="星期四";
  if  (ww==5)  ww="星期五";
  if  (ww==6)  ww="星期六";
  colorfoot="</font>"
  if(type == "1"){
    str = yy + "" + MM + "" + dd+ "" + hh + "" + mm + "" + ss;
  }else {
    str = yy + "年" + MM + "月" + dd + "日" + "|"  + ww + "|"+ hh + ":" + mm + ":" + ss;
  }
  return(str);
}

export {showLocaleTime}

2、使用定时器，在页面中调用CommonMethod.js的文件里封装好的方法showLocaleTime ，并在页面销毁时删除定时器

import React from 'react';
import { Row, Col } from 'antd';
import * as CommonMethod from './CommonMethod';//引入方法
export default class Demo extends React.Component {
    state = {
        time0:"2017年09月10日",
        time1:"星期日",
        time2:"16:23:41",
    }

    componentDidMount(){
        var self = this;
        this.showLocaleTime = setInterval(function(){
          var time = CommonMethod.showLocaleTime();
          var time0 = time.split("|")[0];
          var time1 = time.split("|")[1];
          var time2 = time.split("|")[2];
          self.setState({
            time0:time0,
            time1:time1,
            time2:time2,
          });
        },1000);
     }
    componentWillUnmount(){//组件卸载时清除定时器
        clearInterval(this.showLocaleTime);
    }
    render(){
        const {time0,time1,time2} = this.state;
        return (
            <div>
                <Row>
                  <Col span={18}>
                    <footer>
                      <p>
                        <span>今天是 {time0} | {time1} | </span>
                        <span>{time2}</span>
                      </p>
                    </footer>
                  </Col>         
                </Row>
             </div>
        )
    }
}