博客侧边栏公告添加一个canvas时钟，显示不出来是为什么？

悬赏园豆：5 [已解决问题] 解决于 2018-09-14 14:15

下载好的canvas时钟文件夹内含文件：

这是index.html网页源码

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 canvas超逼真的模拟时钟特效</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link href='http://fonts.useso.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" media="screen" href="css/main.css"/>
    <!--[if IE]>
        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="htmleaf-container">
         
        <div class="container">
            <div id="myclock"></div>
            <div id="alarm1" class="alarm"><a href="javascript:void(0)" id="turnOffAlarm">关闭闹钟</a></div>
        </div>

        <br/><br/>
        <input type="text" id="altime" placeholder="hh:mm"/><br><br>
        <a href="javascript:void(0)" id="set">设置闹钟</a>
     
    </div>
    
    <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
    <script language="javascript" type="text/javascript" src="js/jquery.thooClock.js"></script>  
    <script language="javascript">
        var intVal, myclock;

        $(window).resize(function(){
            window.location.reload()
        });

        $(document).ready(function(){

            var audioElement = new Audio("");

            //clock plugin constructor
            $('#myclock').thooClock({
                size:$(document).height()/1.4,
                onAlarm:function(){
                    //all that happens onAlarm
                    $('#alarm1').show();
                    alarmBackground(0);
                    //audio element just for alarm sound
                    document.body.appendChild(audioElement);
                    var canPlayType = audioElement.canPlayType("audio/ogg");
                    if(canPlayType.match(/maybe|probably/i)) {
                        audioElement.src = 'alarm.ogg';
                    } else {
                        audioElement.src = 'alarm.mp3';
                    }
                    // erst abspielen wenn genug vom mp3 geladen wurde
                    audioElement.addEventListener('canplay', function() {
                        audioElement.loop = true;
                        audioElement.play();
                    }, false);
                },
                showNumerals:true,
                brandText:'THOOYORK',
                brandText2:'Germany',
                onEverySecond:function(){
                    //callback that should be fired every second
                },
                //alarmTime:'15:10',
                offAlarm:function(){
                    $('#alarm1').hide();
                    audioElement.pause();
                    clearTimeout(intVal);
                    $('body').css('background-color','#FCFCFC');
                }
            });

        });



        $('#turnOffAlarm').click(function(){
            $.fn.thooClock.clearAlarm();
        });


        $('#set').click(function(){
            var inp = $('#altime').val();
            $.fn.thooClock.setAlarm(inp);
        });

        
        function alarmBackground(y){
                var color;
                if(y===1){
                    color = '#CC0000';
                    y=0;
                }
                else{
                    color = '#FCFCFC';
                    y+=1;
                }
                $('body').css('background-color',color);
                intVal = setTimeout(function(){alarmBackground(y);},100);
        }
    </script>
</body>
</html>

打开后是动图，这是我截的图

以下是把canvas时钟加到我的微博页面的过程：

把js文件夹下的js文件上传到博客，得到地址

找到设置，在博客侧边栏公告中贴入如下代码

<canvas id="myclock" width="150" height="150">HTML5 canvas超逼真的模拟时钟特效</canvas>
<div class="htmleaf-container">
         
        <div class="container">
            <div id="myclock"></div>
            <div id="alarm1" class="alarm"><a href="javascript:void(0)" id="turnOffAlarm">关闭闹钟</a></div>
        </div>

        <br/><br/>
        <input type="text" id="altime" placeholder="hh:mm"/><br><br>
        <a href="javascript:void(0)" id="set">设置闹钟</a>

<script type="text/javascript" src="http://files.cnblogs.com/files/lj-cn/jquery.thooClock.js"></script>