我的JS文件无法加载到我的Chrome网络应用程序中 [英] My JS file won't load on my Chrome web application
本文介绍了我的JS文件无法加载到我的Chrome网络应用程序中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在写一个Chrome网络应用程序，并尝试在其上加载时钟，但这不工作。 HTML& CSS文件显示，但不是JS，意味着应用程序看起来像一个空框。
我非常感谢您的帮助 - 非常感谢！ p>
这是我的popup.html文件：
<！DOCTYPEhtml&
< link rel =stylesheettype =text / csshref =popup.css>
< title>您的个人主页< / title>
< script src =popup.js>< / script>
< script src =clock.js>< / script>
< / head>
< body>
< div id =clockclass =light>
< div class =display>
< div class =weekdays>< / div>
< div class =ampm>< / div>
< div class =alarm>< / div>
< div class =digits>< / div>
< / div>
< / div>
<！ - JavaScript包含 - >
< script src =http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js>< / script>
< script src =http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js>< / script>
< / body>
< / html>
这里是我的clock.js文件：
$（function（）{
//缓存一些选择器
var clock = $（'＃clock'
alarm = clock.find（'。alarm'），
ampm = clock.find（'。ampm'）;
//将数字映射到其名称是一个数组）
var digit_to_name ='zero one two three four four five six seven八nine'.split（''）;
//此对象将持有数字元素
var digits = {};
//小时，分钟和秒的位置
var positions = [
'h1'，'h2'，'：' 'm1'，'m2'，'：'，'s1'，'s2'
];
//生成需要标记的数字，
//添加他们到时钟
var digit_holder = clock.find（'。digits'）;
$ .each（positions，function（）{
if（this =='：'）{
digit_holder.append（'< div class =dots>'）;
}
else {
var pos = $（'< div>'）;
for（var i = 1; i <8; i ++）{
pos.append（'< span class =d'+ i +'>'）;
}
//将数字设置为key：数字对象中的值对
digits [this] = pos;
//将数字元素添加到页面
digit_holder.append（pos）;
}
}）;
//添加工作日名称
var weekday_names ='MON TUE WED THU FRI SAT SUN'.split（''），
weekday_holder = clock.find （'.weekdays'）;
$ .each（weekday_names，function（）{
weekday_holder.append（'< span>'+ this +'< / span>'）;
} ;
var weekdays = clock.find（'。weekdays span'）;
//每秒运行一个计时器并更新时钟
（function update_time（）{
//使用moment.js输出当前时间为字符串
// hh用于12小时格式的小时，
// mm - 分钟，ss-秒（所有带前导零），
// d一个星期，A是AM / PM
var now = moment（）。format（hhmmssdA）;
digits.h1.attr ，digit_to_name [now [0]]）;
digits.h2.attr（'class'，digit_to_name [now [1]]）;
digits.m1.attr（'class'，digit_to_name [now [2]]）;
digits.m2.attr（'class'，digit_to_name [now [3]]）;
digits.s1.attr（'class'，digit_to_name [now [4] ）;
digits.s2.attr（'class'，digit_to_name [now [5]]）;
//库返回星期日作为一周的第一天
// Stupid，我知道，让所有的一天下来一个位置，
//和周日最后
var dow = now [6];
dow - ;
// Sunday！
if（dow< 0）{
//让它最后
dow = 6;
}
//标记活动的星期几
weekdays.removeClass（'active'）。eq（dow）.addClass（'active'）
//设置am / pm文本：
ampm.text（now [7] + now [8]）;
//将此函数调度为在1秒内再次运行
setTimeout（update_time，1000）;
}）（）;
有没有办法让这个出现？
谢谢！
解决方案
您的clock.js使用jQuery，但在加载jQuery之前加载。在jQuery之后包含它。
I'm writing a Chrome web application and am trying to load a clock onto it, but this is not working. The HTML & CSS files are showing up but not the JS, meaning that the application just looks like an empty box.
I would really appreciate your help - thank you very much!
Here is my popup.html file:
<!DOCTYPEhtml>
<link rel="stylesheet" type="text/css" href="popup.css">
<title>Your Personal Homepage</title>
<script src="popup.js"></script>
<script src="clock.js"></script>
</head>
<body>
<div id="clock" class="light">
<div class="display">
<div class="weekdays"></div>
<div class="ampm"></div>
<div class="alarm"></div>
<div class="digits"></div>
</div>
</div>
<!-- JavaScript Includes -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
</body>
</html>
And here is my clock.js file:
$(function(){
// Cache some selectors
var clock = $('#clock'),
alarm = clock.find('.alarm'),
ampm = clock.find('.ampm');
// Map digits to their names (this will be an array)
var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
// This object will hold the digit elements
var digits = {};
// Positions for the hours, minutes, and seconds
var positions = [
'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
];
// Generate the digits with the needed markup,
// and add them to the clock
var digit_holder = clock.find('.digits');
$.each(positions, function(){
if(this == ':'){
digit_holder.append('<div class="dots">');
}
else{
var pos = $('<div>');
for(var i=1; i<8; i++){
pos.append('<span class="d' + i + '">');
}
// Set the digits as key:value pairs in the digits object
digits[this] = pos;
// Add the digit elements to the page
digit_holder.append(pos);
}
});
// Add the weekday names
var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
weekday_holder = clock.find('.weekdays');
$.each(weekday_names, function(){
weekday_holder.append('<span>' + this + '</span>');
});
var weekdays = clock.find('.weekdays span');
// Run a timer every second and update the clock
(function update_time(){
// Use moment.js to output the current time as a string
// hh is for the hours in 12-hour format,
// mm - minutes, ss-seconds (all with leading zeroes),
// d is for day of week and A is for AM/PM
var now = moment().format("hhmmssdA");
digits.h1.attr('class', digit_to_name[now[0]]);
digits.h2.attr('class', digit_to_name[now[1]]);
digits.m1.attr('class', digit_to_name[now[2]]);
digits.m2.attr('class', digit_to_name[now[3]]);
digits.s1.attr('class', digit_to_name[now[4]]);
digits.s2.attr('class', digit_to_name[now[5]]);
// The library returns Sunday as the first day of the week.
// Stupid, I know. Lets shift all the days one position down,
// and make Sunday last
var dow = now[6];
dow--;
// Sunday!
if(dow < 0){
// Make it last
dow = 6;
}
// Mark the active day of the week
weekdays.removeClass('active').eq(dow).addClass('active');
// Set the am/pm text:
ampm.text(now[7]+now[8]);
// Schedule this function to be run again in 1 sec
setTimeout(update_time, 1000);
})();
Is there any way to make this show up?
Thank you!
解决方案
Your clock.js uses jQuery but is loaded before jQuery is loaded. Include it after jQuery instead.
这篇关于我的JS文件无法加载到我的Chrome网络应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
