首页新闻找找看学习计划

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

0
悬赏园豆: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>
复制代码

保存并退出进入我的博客主页,结果如下图

 

发现只显示其中一部分,并不能显示时钟和动画,是不是我博客侧边栏贴的代码错了,还是别的原因,本人没学过html,不是很懂,麻烦会的帮我看看。

 

以下是自己的一点看法,不对之处还请指教:

之后我试着把源码部分单独copy出来,保存成.html文件,编码格式是UTF-8,打开文件,显示下图:

跟博客上显示效果一样,所以我觉得应该不是代码贴错吧,可能是缺了动画显示之类的插件,可是这部分代码我不会写啊!或者是浏览器不支持html5?可是我查了猎豹浏览器支持html5啊,有点懵了,昨天开始研究这个东西,到现在还没有实质性的进展,有人给我指点一下迷津吗?

附文件链接:

链接: http://pan.baidu.com/s/1dETxcOh 密码: q5f9

Tracy21的主页 Tracy21 | 菜鸟二级 | 园豆:214
提问于:2017-06-13 18:10
< >
分享
最佳答案
0

博客侧边栏公告(支持HTML代码) 旁边有个(申请JS权限)的按钮,你申请了吗

收获园豆:5
by.Genesis | 小虾三级 |园豆:1429 | 2017-06-14 11:26
其他回答(1)
0

暂无解决办法

Tracy21 | 园豆:214 (菜鸟二级) | 2018-09-14 14:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册