模板效果

模板代码

svg代码

<svg data-author="懂点君" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 1920 1080" xml:space="preserve" style="display: inline-block;width: 100%;background-position: 0 0;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqT1hYF9cM4F6YZiaPbhLl8icCNB01xVhB5l8OnWIBKHpGecyMxMlFF8AAA2V5ZBv2ntobdNVquMgffg/0?wx_fmt=png);vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;">
    <g transform="translate(80 700)">
        <!-- 水平居中：text-anchor = "middle" 垂直居中：dominant-baseline="middle"-->
        <text font-family="DFKai-SB" font-size="100" font-weight="bold" fill="#fff" dominant-baseline="middle">懂点君已成立：</text>
    </g>  
    <g transform="translate(780 700)">
        <text id="day" font-family="DFKai-SB" font-size="100" font-weight="bold" fill="#fff" dominant-baseline="middle">00天</text>
    </g>      
    <g transform="translate(1100 700)">
        <text id="hour" font-family="DFKai-SB" font-size="100" font-weight="bold" fill="#fff" dominant-baseline="middle">00时</text>
    </g>      
    <g transform="translate(1350 700)">
        <text id="min" font-family="DFKai-SB" font-size="100" font-weight="bold" fill="#fff" dominant-baseline="middle">00分</text>
    </g>      
    <g transform="translate(1600 700)">
        <text id="sec" font-family="DFKai-SB" font-size="100" font-weight="bold" fill="#fff" dominant-baseline="middle">00秒</text>
    </g>  
    <script type="text/javascript">
        /**
         * 公众号：懂点君
         * 微信：dong_dian_jun
         * @type {[type]}
         */
        var dayEle = document.querySelector('#day'),
        hourEle = document.querySelector('#hour'),
        minEle = document.querySelector('#min'),
        secEle = document.querySelector('#sec');

        function timeFn () {
            // 获取当前系统时间
            var nowTime = new Date(),
            // 懂点君成立时间【可修改】
            foundTime   = new Date(2019, 11, 2),
            // 计算起止时间相差
            times       = nowTime.getTime() - foundTime.getTime(),
            // 毫秒转换为秒
            sec         = Math.floor(times / 1000),
            // 获取多少天
            day         = Math.floor((sec / 3600 / 24)),
            // 获取多少个小时
            hour        = Math.floor((sec / 3600) % 24),
            // 获取多少分
            min         = Math.floor((sec / 60) % 60),
            // 获取多少秒
            sec         = Math.floor((sec % 60));

            // 补前引导0
            day = day &lt; 10 ? `0${day}` : day; 
            hour = hour &lt; 10 ? `0${hour}` : hour; 
            min = min &lt; 10 ? `0${min}` : min; 
            sec = sec &lt; 10 ? `0${sec}` : sec; 

            dayEle.innerHTML = `${day}天`;
            hourEle.innerHTML = `${hour}时`;
            minEle.innerHTML = `${min}分`;
            secEle.innerHTML = `${sec}秒`;

            setTimeout(timeFn, 10)
        }timeFn();
</script>    
</svg>

文章引入代码

<embed src="https://mmbiz.qpic.cn/mmbiz_svg/574VdhMFwaHE0Vjkia538uwwYkxD5FAnicXnBt1aE08az3gfrkIjY40sHf25O0aBNcibfyibPt3zuqekIWicp8HZknCZCecficIfp0/0?wx_fmt=svg"></embed>