将基本JavaScript转换为HTML DIV的疑难解答

r8uurelv  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(91)

自从我接触JavaScript多年以来,我似乎无法将这个以前工作的JavaScript重用到一个新的HTML文件中。所有东西都在一个文件夹里。尽管如此,当打开到浏览器中时,网页中不会显示任何内容。
我想我在HTML文件中做错了:

<html>
<head>
<script type="text/javascript" src="Traits.js"></script>
</head>
<body>
<p>
<div align="center" id="id1"></div>
<div align="center" id="id2"></div>
<div align="center" id="id3"></div>
<div align="center" id="id4"></div>
<div align="center" id="id5"></div>
</p>
</body>
</html>

和相邻的Traits.js文件...

$(document).ready(function() {
                
Date.prototype.getDOY = function() {
var onejan = new Date(this.getFullYear(),0,1);
return Math.ceil((this - onejan) / 86400000);
}
var pri="Title 1";
var hu="Title 2";
var cpri="Title 3";
var safe="Safety";
var wk=1;
var pwk=6;
var hwk=1;
var cwk=1;
var swk=1;
var today = new Date();
var daynum = today.getDOY();
var yr=today.getFullYear();
var yrs=(yr-2012);
var dys=(yrs*365);
var ldys=Math.floor(yrs/4);

var tdays=(ldys+dys+daynum-14);     //Sets the beginning of a cycle for ID2 Traits.
var cdays=tdays-113;                //Sets the beginning of a cycle for ID3 Traits. 
                                    //Adjust these last two lines as necessary to change which week is used to display for ID3.
                                    //Add 7 to the number being subtracted to go back a week or subtract 7 to go forward a week. 
var oedays=daynum+4;                //Sets the day of the year for ID1.
if (yr==2015) {oedays=oedays-365;}  //This will need to be adjusted for leap years in 2020. 

tdays=(tdays+28);                   //Resets tdays so that we started with 1 on 29 June 2013.

while (tdays>70)
{
         tdays=(tdays-70);
}
wk=Math.floor((tdays/7)+1);         //Makes a week 1-10 for ID2.

while (cdays>63)
{
         cdays=(cdays-63);
}
cwk=Math.floor((cdays/7)+1);        //Makes a week 1-9 for ID3.

if (wk==1) {pri="Personal Accountability";}
if (wk==2) {pri="Questioning Attitude";}
if (wk==3) {pri="Effective Safety Communication";}
if (wk==4) {pri="Leadership Safety Values and Actions";}
if (wk==5) {pri="Decision-Making";}
if (wk==6) {pri="Respectful Work Environment";}
if (wk==7) {pri="Continuous Learning";}
if (wk==8) {pri="Problem Identification and Resolution";}
if (wk==9) {pri="Environment for Raising Concerns";}
if (wk==10) {pri="Work Processes";}

if (cwk==1) {cpri="Leaders Demonstrate Alignment on a Commitment to Excellence";}
if (cwk==2) {cpri="Strong First-Line Supervision Is Key to Success";}
if (cwk==3) {cpri="Personnel Are Qualified for Their Jobs";}
if (cwk==4) {cpri="Schedules Are Realistic and Understood";}
if (cwk==5) {cpri="Construction of a Nuclear Plant Has Special Requirements";}
if (cwk==6) {cpri="Personnel Safety Is Highly Valued";}
if (cwk==7) {cpri="The Plant Is Built As Designed";}
if (cwk==8) {cpri="Deviations and Concerns Are Identified, Communicated, and Resolved";}
if (cwk==9) {cpri="The Transition to Plant Operation Is Started Early";}

$('#id1').html("<font size='3' color='red' face='Arial, Helvetica'><a href='Calendar%20" + yr + "%20Calendar.pdf#page=" + oedays +"'>Today's " + yr + " Calendar: </a></font><font size='3' face='Arial, Helvetica'>Opens the calendar to today's date.<br></font><hr>");

$('#id2').html("<font size='3' face='Arial, Helvetica'>ID2 Topic: </font><font size='3' color='red' face='Arial, Helvetica'><a href='Image%20" + wk +".jpg'>" + pri +"</a></font><br><hr>");

$('#id3').html("<font size='3' face='Arial, Helvetica'>ID3 Topic: </font><font size='3' color='red' face='Arial, Helvetica'><a href='Topical%20%23" + cwk +".pdf'>" + cpri +"</a></font><br><hr>");

$('#id4').html("<font size='3' color='red' face='Arial, Helvetica'><a href='ID4%20Document.pdf'>ID4 Doucment</a></font><br><hr>");

});

请教我...

ldioqlga

ldioqlga1#

确保在HTML文档中Traits.js文件之前包含了jQuery库。你可以像这样在关闭之前包含jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

脚本顺序:确保引用Traits.js的标记在包含jQuery之后,如下面的代码所示:
HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="Traits.js"></script>

文件准备就绪:确保在Traits.js中的JavaScript执行之前,HTML页面已完全加载。您正在使用$(document).ready(),它应该等待DOM准备就绪。如果仍然遇到问题,请尝试将script标记移动到结束标记之前,如下所示:
HTML

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

我希望我能帮上忙

相关问题