0

我的问题是，当 JS 时钟直接放在我的 HTML 文档的头部时，它似乎工作正常，但当我从外部 .js 文件加载它时却无法工作。我的 .js 文件中的许多其他东西都可以工作，只是不是这个！知道问题可能是什么吗？

    function startTime() {
    var today=new Date(),
        h=today.getHours(),
        m=today.getMinutes(),
        s=today.getSeconds();

    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('bigtime').innerHTML=h+":"+m+":"+s;
}

function checkTime(i) {
    if (i<10) {
        i="0" + i;
    }
    return i;
}

这是小提琴。

编辑：我在我的 HTML 中像这样加载我的 js 文件：

<script type="text/javascript" src="js.js"></script>

在我的 jquery 文件之后。

在我的 js 文件中像这样：

$(document).ready(function () { 

});
4

4 回答 4

1

我将加载 jquery 库并在 JS 文件 http://jsfiddle.net/X5njR/中执行

$(document).ready(function (){
startTime();  
});

这使得 HTML Cleaner 并将所有 JS 保存在一个地方。

于 2013-11-15T08:12:52.030 回答
1

jsFiddle 的选项将你的onLoad整个 JS 包裹在//<![CDATA[ window.onload=function(){}//]]>

这意味着直到您的事件处理程序触发startTime后才定义您的函数。onloadbody

使用该No wrap - in <head>选项来解决此问题。

于 2013-11-15T08:18:38.440 回答
1

在您的 jsFiddle 中，您选择了该onLoad选项。如果您从正文中删除内联 onload 并将其放在startTime();JavaScript 的底部，它就可以工作。
但这只是在 jsFiddle 上的情况。在“现实世界”情况下，您需要将脚本放置在正文中或头部中，并在页面加载时使用事件侦听器。

jQuery 的缩写是$(function() { /* executed after page load */ });

正如您所提到的，您正在使用 jQuery，这是一个使用 jQuery onload 的解决方案：

function startTime()
{
  /* ... */
}
// after the whole page is loaded, execute the previously declared startTime()
$(function() {
  startTime();
});
于 2013-11-15T08:18:51.093 回答
1

前段时间我用 TypeScript 做了一个时钟。

在这里，我传递了时钟的功能。

/**
 * @class
 * @name Time
 */
class Time
{
    private millisecond: number;
    private second: number;
    private minute: number;
    private hour: number;
    private day: number;
    private year: number;



    /**
     * @hideconstructor
     * @param {number} millisecond
     * @param {number} second
     * @param {number} minute
     * @param {number} hour
     * @param {number} day
     * @param {number} year
     * @returns {void}
     */
    public constructor(millisecond: number = NaN,
                       second: number = NaN,
                       minute: number = NaN,
                       hour: number = NaN,
                       day: number = NaN,
                       year: number = NaN)
    {
        this.millisecond = millisecond;
        this.second = second;
        this.minute = minute;
        this.hour = hour;
        this.day = day;
        this.year = year;
    }



    //Getters and Setters.
    /**
     * @access public
     * @method
     * @alias Time.getMillisecond
     * @returns {number}
     */
    public getMillisecond(): number
    {
        return this.millisecond;
    }

    /**
     * @access public
     * @method
     * @alias Time.setMillisecond
     * @param {number} millisecond
     * @returns {void}
     */
    public setMillisecond(millisecond: number): void
    {
        this.millisecond = millisecond;
    }

    /**
     * @access public
     * @method
     * @alias Time.getSecond
     * @returns {number}
     */
    public getSecond(): number
    {
        return this.second;
    }

    /**
     * @access public
     * @method
     * @alias Time.setSecond
     * @param {number} second
     * @returns {void}
     */
    public setSecond(second: number): void
    {
        this.second = second;
    }

    /**
     * @access public
     * @method
     * @alias Time.getMinute
     * @returns {number}
     */
    public getMinute(): number
    {
        return this.minute;
    }

    /**
     * @access public
     * @method
     * @alias Time.setMinute
     * @param {number} minute
     * @returns {void}
     */
    public setMinute(minute: number): void
    {
        this.minute = minute;
    }

    /**
     * @access public
     * @method
     * @alias Time.getHour
     * @returns {number}
     */
    public getHour(): number
    {
        return this.hour;
    }

    /**
     * @access public
     * @method
     * @alias Time.setHour
     * @param {number} hour
     * @returns {void}
     */
    public setHour(hour: number): void
    {
        this.hour = hour;
    }

    /**
     * @access public
     * @method
     * @alias Time.getDay
     * @returns {number}
     */
    public getDay(): number
    {
        return this.day;
    }

    /**
     * @access public
     * @method
     * @alias Time.setDay
     * @param {number} day
     * @returns {void}
     */
    public setDay(day: number): void
    {
        this.day = day;
    }

    /**
     * @access public
     * @method
     * @alias Time.getYear
     * @returns {number}
     */
    public getYear(): number
    {
        return this.year;
    }

    /**
     * @access public
     * @method
     * @alias Time.setYear
     * @param {number} year
     * @returns {void}
     */
    public setYear(year: number): void
    {
        this.year = year;
    }



    /**
     * @access public
     * @method
     * @alias Time.today
     * @returns {Date}
     */
    public today(): Date
    {
        return new Date();
    }



    //Time format.
    /**
     * @access public
     * @method
     * @alias Time.year_format
     * @returns {string}
     */
    public year_format(): string
    {
        this.setYear(this.today().getFullYear())

        if (this.getYear().valueOf() >= 0 &&
            this.getYear().valueOf() < 10)
        {
            return `000${this.getYear()}`;
        }
        else
        if (this.getYear().valueOf() >= 10 &&
            this.getYear().valueOf() < 100)
        {
            return `00${this.getYear()}`;
        }
        else
        if (this.getYear().valueOf() >= 100 &&
            this.getYear().valueOf() < 1000)
        {
            return `0${this.getYear()}`;
        }
        else
        {
            return this.getYear().toString();
        }
    }

    /**
     * @access public
     * @method
     * @alias Time.day_format
     * @returns {string}
     */
    public day_format(): string
    {
        this.setDay(this.today().getDate());

        if (this.getDay().valueOf() >= 0 &&
            this.getDay().valueOf() < 10)
        {
            return `0${this.getDay()}`;
        }
        else
        {
            return this.getDay().toString();
        }
    }

    /**
     * @access public
     * @method
     * @alias Time.hour_format
     * @returns {string}
     */
    public hour_format(): string
    {
        this.setHour(this.today().getHours());

        if (this.getHour().valueOf() >= 0 &&
            this.getHour().valueOf() < 10)
        {
            return `0${this.getHour()}`;
        }
        else
        {
            return this.getHour().toString();
        }
    }

    /**
     * @access public
     * @method
     * @alias Time.minutes_format
     * @returns {string}
     */
    public minutes_format(): string
    {
        this.setMinute(this.today().getMinutes());

        if (this.getMinute().valueOf() >= 0 &&
            this.getMinute().valueOf() < 10)
        {
            return `0${this.getMinute()}`;
        }
        else
        {
            return this.getMinute().toString();
        }
    }

    /**
     * @access public
     * @method
     * @alias Time.second_format
     * @returns {string}
     */
    public second_format(): string
    {
        this.setSecond(this.today().getSeconds());

        if (this.getSecond().valueOf() >= 0 &&
            this.getSecond().valueOf() < 10)
        {
            return `0${this.getSecond()}`;
        }
        else
        {
            return this.getSecond().toString();
        }
    }

    /**
     * @access public
     * @method
     * @alias Time.millisecond_format
     * @returns {string}
     */
    public millisecond_format(): string
    {
        this.setMillisecond(this.today().getMilliseconds());

        if (this.getMillisecond().valueOf() >= 0 &&
            this.getMillisecond().valueOf() < 10)
        {
            return `000${this.getMillisecond()}`;
        }
        else
        if (this.getMillisecond().valueOf() >= 10 &&
            this.getMillisecond().valueOf() < 100)
        {
            return `00${this.getMillisecond()}`;
        }
        else
        if (this.getMillisecond().valueOf() >= 100 &&
            this.getMillisecond().valueOf() < 1000)
        {
            return `0${this.getMillisecond()}`;
        }
        else
        {
            return this.getMillisecond().toString();
        }
    }



    //Current.
    /**
     * @access public
     * @method
     * @alias Time.current_month
     * @returns {string}
     */
    public current_month(): string
    {
        //Constants.
        /**
         * @access private
         * @constant
         * @type {Array<string>}
         * @alias months
         */
        const months: Array<string> = [
            `January`,
            `February`,
            `March`,
            `April`,
            `May`,
            `June`,
            `July`,
            `August`,
            `September`,
            `October`,
            `November`,
            `December`
        ];

        /**
         * @access private
         * @constant
         * @type {number}
         * @alias month
         */
        const month: number = this.today().getMonth();

        return months[month];
    }

    /**
     * @access public
     * @method
     * @alias Time.current_day
     * @returns {string}
     */
    public current_day(): string
    {
        //Constants.
        /**
         * @access private
         * @constant
         * @type {Array<string>}
         * @alias week
         */
        const week: Array<string> = [
            `Sunday`,
            `Monday`,
            `Tuesday`,
            `Wednesday`,
            `Thursday`,
            `Friday`,
            `Saturday`
        ];

        /**
         * @access private
         * @constant
         * @type {number}
         * @alias weekday
         */
        const weekday: number = this.today().getDay();

        return week[weekday];
    }
}

/**
 * @class
 * @name Clock
 */
class Clock extends Time
{
    /**
     * @hideconstructor
     * @param {number} millisecond
     * @param {number} second
     * @param {number} minute
     * @param {number} hour
     * @param {number} day
     * @param {number} year
     * @returns {void}
     */
    public constructor(millisecond: number = NaN,
                       second: number = NaN,
                       minute: number = NaN,
                       hour: number = NaN,
                       day: number = NaN,
                       year: number = NaN)
    {
        super
        (
            millisecond,
            second,
            minute,
            hour,
            day,
            year
        );
    }



    /**
     * @access private
     * @method
     * @alias Clock.span_day
     * @param {string} id
     * @returns {HTMLSpanElement}
     */
    private span_day(id: string): HTMLSpanElement
    {
        return (window.document.getElementById(id) as HTMLSpanElement);
    }

    /**
     * @access private
     * @method
     * @alias Clock.span_time
     * @param {string} id
     * @returns {HTMLSpanElement}
     */
    private span_time(id: string): HTMLSpanElement
    {
        return (window.document.getElementById(id) as HTMLSpanElement);
    }



    /**
     * @access private
     * @method
     * @alias Clock.time
     * @returns {string}
     */
    private time(): string
    {
        //Objects.
        /**
         * @access private
         * @constant
         * @type {object}
         * @alias time
         */
        const time: Time = new Time();

        return `${time.hour_format()}:${time.minutes_format()}:${time.second_format()}:${time.millisecond_format()}`;
    }

    /**
     * @access private
     * @method
     * @alias Clock.short_date
     * @returns {string}
     */
    private short_date(): string
    {
        //Objects.
        /**
         * @access private
         * @constant
         * @type {object}
         * @alias time
         */
        const time: Time = new Time();

        return time.today().toLocaleDateString();
    }

    /**
     * @access private
     * @method
     * @alias Clock.long_date
     * @returns {string}
     */
    private long_date(): string
    {
        //Objects.
        /**
         * @access private
         * @constant
         * @type {object}
         * @alias time
         */
        const time: Time = new Time();

        return `${time.current_day()}, ${time.current_month()} ${time.day_format()}, ${time.year_format()}`;
    }



    //Clock.
    /**
     * @access public
     * @method
     * @alias Clock.clock__short
     * @param {string} day_id
     * @param {string} time_id
     * @returns {void}
     */
    public clock__short(day_id: string,
                        time_id: string): void
    {
        window.setInterval(function ()
        {
            /**
             * @access private
             * @constant
             * @type {object}
             * @alias clock
             */
            const clock: Clock = new Clock();

            clock.span_day(day_id).innerHTML = clock.short_date();
        }, 0);

        window.setInterval(function ()
        {
            /**
             * @access private
             * @constant
             * @type {object}
             * @alias clock
             */
            const clock: Clock = new Clock();

            clock.span_time(time_id).innerHTML = clock.time();
        }, 0);
    }

    /**
     * @access public
     * @method
     * @alias Clock.clock__long
     * @param {string} day_id
     * @param {string} time_id
     * @returns {void}
     */
    public clock__long(day_id: string,
                       time_id: string): void
    {
        window.setInterval(function ()
        {
            /**
             * @access private
             * @constant
             * @type {object}
             * @alias clock
             */
            const clock: Clock = new Clock();

            clock.span_day(day_id).innerHTML = clock.long_date();
        }, 0);

        window.setInterval(function ()
        {
            /**
             * @access private
             * @constant
             * @type {object}
             * @alias Clock.clock__long.clock
             */
            const clock: Clock = new Clock();

            clock.span_time(time_id).innerHTML = clock.time();
        }, 0);
    }
}

/**
 * @function
 * @name clock
 * @param {string} day_id This ID refers to the ID of the HTML where you want to put the day.
 * @param {string} time_id This ID refers to the ID of the HTML where you want to put the time.
 * @param {string} type The "type" refers to whether the clock is Long or Short.
 * @returns {void}
 * @summary This function is to insert a clock on the page.
 */
function clock(day_id: string,
               time_id: string,
               type: string): void
{
    try
    {
        //Objects.
        /**
         * @access private
         * @constant
         * @type {object}
         * @alias clock
         */
        const clock: Clock = new Clock();



        if (type === `Long`)
        {
            clock.clock__long(day_id, time_id);
        }
        else
        if (type === `Short`)
        {
            clock.clock__short(day_id, time_id);
        }
    }
    catch (exception)
    {
        window.console.error(`Unexpected error. | Error name: ${(exception as Error).name}; Error message: ${(exception as Error).message}`);
    }
}

至少对我来说，这段代码（已经制作了 JavaScript 并从 Head 中放置）对我有用。我通过从正文标记末尾的脚本标记调用函数来使其工作。

于 2021-05-20T14:31:23.873 回答