Question

我正在编写一个Chrome网络应用程序，我正在尝试将时钟加载到它上面，但这不起作用。 HTML＆amp; CSS文件显示但不是JS，这意味着应用程序看起来像一个空盒子。

我非常感谢你的帮助 - 非常感谢你！

这是我的popup.html文件：

    <!DOCTYPE html>
  <head>
<link rel="stylesheet" type="text/css" href="popup.css">
    <title>Your AH ersonal Homepage</title>
    <script src="popup.js"></script>
    <script src="clock.js"></script>
  </head>
   <body style="background-color:#cc6666;">
        <h1>Your AH Personal Homepage</h1>
<div class="clock-wrap">
        <div class="hour-wrap">
                <div class="digit-top">
                    <div class="front">00</div>
                    <div class="back">00</div>
                </div>
                <div class="digit-bottom">
                    <div class="front">00</div>
                </div>
            </div>
            <div class="min-wrap">
                <div class="digit-top">
                    <div class="front">00</div>
                    <div class="back">00</div>
                </div>
                <div class="digit-bottom">
                    <div class="front">00</div>
                </div>
            </div>
      <div class="sec-wrap">
                <div class="digit-top">
                    <div class="front">00</div>
                    <div class="back">00</div>
                </div>
                <div class="digit-bottom">
                    <div class="front">00</div>
                </div>
            </div>
        </div>
    </body>
</html>

这是我的clock.js：

jQuery load()

Element.Properties.transform = {

  set: function(transform){
    var property = 'transform';
        console.log(Browser);
        if(Browser.chrome) property = 'WebkitTransform';
        if(Browser.firefox)  property = 'MozTransform';
        if(Browser.opera) property = 'OTransform';

        this.style[property] = transform;
        this.store('transform', transform);
    },

    get: function(){
        return this.retrieve('transform', '');
    }

};

Element.implement({

    setTransform: function(value){
        return this.set('transform', value);
    },

    getTransform: function(){
        return this.get('transform');
    }

});

$(window).addEvent('domready', function()
{
  var $hourWrap = $$('.hour-wrap');
    var $hourFront = $hourWrap.getElement('div.front');
    var $hourBack = $hourWrap.getElement('div.back')
    var $hourTop = $hourWrap.getElement('div.digit-top');
    var $hourBottom = $hourWrap.getElement('div.digit-bottom .front');

    var $minWrap = $$('.min-wrap');
    var $minFront = $minWrap.getElement('div.front');
    var $minBack = $minWrap.getElement('div.back');
    var $minTop = $minWrap.getElement('div.digit-top');
    var $minBottom = $minWrap.getElement('div.digit-bottom .front');


  var $secWrap = $$('.sec-wrap');
    var $secFront = $secWrap.getElement('div.front');
    var $secBack = $secWrap.getElement('div.back');
    var $secTop = $secWrap.getElement('div.digit-top');
    var $secBottom = $secWrap.getElement('div.digit-bottom .front');

    var currentHour = 0;
    var currentMin = 0;
  var currentSec = 0;

    var setClock = function()
    {
        var time = new Date();
        var hour = time.getHours();
        var min = time.getMinutes();
    var sec = time.getSeconds();

        if(currentHour != hour)
        {
            currentHour = hour;
            var hourText = hour < 10 ? '0'+hour : hour;

            // make el to sit behind the top digit
            var $newHourTop = new Element('div', {class: 'digit-top', html: $hourTop.get('html'), style: 'z-index:1;'})
            var $newHourFront = $newHourTop.getElement('div.front');
            var $newHourBack = $newHourTop.getElement('div.back');

            $newHourFront.set('text', hourText);
            $hourWrap.adopt($newHourTop);

            // start the animation
            $hourFront.setTransform('rotateX(180deg)');
            $hourBack.setTransform('rotateX(0deg)');
            $hourBack.setStyle('zIndex', 40);

            // set the min back
            $hourBack.set('text', hourText);

            (function()
            {
                $hourTop.destroy();
                $hourFront.destroy();
                $hourBack.destroy();

                $hourTop = $newHourTop;
                $hourFront = $newHourFront;
                $hourBack = $newHourBack;

                $hourTop.setStyle('zIndex', 10);
                $hourBottom.set('text', hourText);
            }).delay(800);
        }

        if(currentMin != min)
        {
            currentMin = min;
            var minText = min < 10 ? '0'+min : min;

            // make el to sit behind the top digit
            var $newMinTop = new Element('div', {class: 'digit-top', html: $minTop.get('html'), style: 'z-index:1;'})
            var $newMinFront = $newMinTop.getElement('div.front');
            var $newMinBack = $newMinTop.getElement('div.back');

            $newMinFront.set('text', minText);
            $minWrap.adopt($newMinTop);

            // start the animation
            $minFront.setTransform('rotateX(180deg)');
            $minBack.setTransform('rotateX(0deg)');
            $minBack.setStyle('zIndex', 40);

            // set the min back
            $minBack.set('text', minText);

            (function()
            {
                $minTop.destroy();
                $minFront.destroy();
                $minBack.destroy();

                $minTop = $newMinTop;
                $minFront = $newMinFront;
                $minBack = $newMinBack;

                $minTop.setStyle('zIndex', 10);
                $minBottom.set('text', minText);
            }).delay(800);
        }


    if(currentSec != sec)
        {
            currentSec = sec;
            var secText = sec < 10 ? '0'+sec : sec;

            // make el to sit behind the top digit
            var $newSecTop = new Element('div', {class: 'digit-top', html: $secTop.get('html'), style: 'z-index:1;'})
            var $newSecFront = $newSecTop.getElement('div.front');
            var $newSecBack = $newSecTop.getElement('div.back');

            $newSecFront.set('text', secText);
            $secWrap.adopt($newSecTop);

            // start the animation
            $secFront.setTransform('rotateX(180deg)');
            $secBack.setTransform('rotateX(0deg)');
            $secBack.setStyle('zIndex', 40);

            // set the min back
            $secBack.set('text', secText);

            (function()
            {
                $secTop.destroy();
                $secFront.destroy();
                $secBack.destroy();

                $secTop = $newSecTop;
                $secFront = $newSecFront;
                $secBack = $newSecBack;

                $secTop.setStyle('zIndex', 10);
                $secBottom.set('text', secText);
            }).delay(800);
        }

        //$hourEls.set('text', hour);

    }

    setClock.periodical(1000);
});

我真的很感谢你的帮助，因为我不认识JS，也从未做过网络扩展。谢谢！

为什么我的JS文件没有加载到我的Chrome网络扩展程序上？

0 个答案: