我似乎不能让这个工作。我有一个小的JS文件,根据一天中的时间切换横幅,但似乎在我的PHP文件中做外部引用不起作用。它在HTML页面中运行良好。
这是JavaScript文件中的代码
function getStylesheet() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 19) {
document.write("<img src='images/banner_day.jpg'>");
} else {
document.write("<img src='images/banner_night.jpg'>");
}
}
getStylesheet();
这里是我用来调用JavaScript文件的参考代码。它在一个PHP文件中
<script src="http://beta.website.com/wp-content/themes/theme/scripts/banner.js"></script>
PHP页面上的所有内容都显示在浏览器中,除了为我试图用脚本调用的横幅。
这是整个PHP文件代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<a href="http://bifffffdggdch.com"><img src="http://beta.dfdfdf.com/wp-content/themes/asdafd/images/logo.png" /></a>
</div>
<div id="shadow2"></div>
<div id="shadow1"></div>
<ul id="menu">
<li><a href="">df</a></li>
<li><a href="">df</a></li>
<li><a href="">fd df df</a></li>
<li><a href="">The asfdssd asdfds</a></li>
<li><a href="">sf</a></li>
<li><a href="">df</a></li>
<li><a href="">dfd</a></li>
</ul>
<div id="slogan"><big>"fasfdsads2005."</big></div>
<div id="loginDiv">Login Panel Here</div>
</div>
<div id="banner">
<script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script></div>
<div class="sidebar">
Sidebar Content<br />
<br /><br />
blah
blah
blah
</div>
<div class="content">
Main Content
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="footer">
<div class="container">
<div class="footer_column long">
<h3>Cadsfadsfafdfsd.com All Rights Reserved</h3>
<p>dsafasdfdffadffadsdafsdfsadafsdfsadfas</p>
</div>
<div class="footer_column2">
<h3>More Links</h3>
<ul>
<li><a href="http://aadfsdfsdfa.
com">asfsdfa</a></li>
<li><a href="http://ItsNotch.
com">ItsNotch</a></li>
<li><a href="http://adfasfsfaf.
com">adsfasf</a></li>
<li><a href="http://twitter.
com/safs">Twitter</a></li>
<li><a href="https://www.facebook.com/group.php?gid=10215yy20340498">Facebook Fan Page
</a></li>
</ul>
</div>
<div class="footer_column2">
<h3>RSS</h3>
<ul>
<li><a href="">RSS Feed</a></li>
<li><a href="">What is RSS?</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
试着这样修改你的Javascript:
window.onload = function () {
// Uncomment this line to make sure the script is loading/running, then delete it
// alert('Hello, your Javascript is running');
// Declare variables
var currentTime, bannerDiv, newImg;
// Get currentTime
currentTime = new Date().getHours();
// Get 'banner' div
bannerDiv = document.getElementById('banner');
// Get create a new <img>
newImg = document.createElement('img');
// Assign a src="" attribute depending on the time
newImg.src = (currentTime > 7 && currentTime < 19) ? 'images/banner_day.jpg' : 'images/banner_night.jpg';
// add the new image to the document
bannerDiv.appendChild(newImg);
};
放到文档的<head>
中,因此更改
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<!-- ....... -->
<div id="banner">
<script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
</div>
<!-- ....... -->
…:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
</head>
<body>
<!-- ....... -->
<div id="banner"></div>
<!-- ....... -->
如果仍然不起作用,有两种情况:
- 你的javascript文件实际上不是在
http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js
,所以脚本不能加载/运行。取消第一行注释以确认脚本正在运行。 - 你的横幅图像不能在
images/banner_night.jpg
找到-确保你的相对路径是正确的。
你确定你已经把<script></script>
记在脑子里了吗?我当然看不到它(除非它在<?php wp_head();>
?)。
尝试导航到http://beta.website.com/wp-content/themes/theme/scripts/banner.js ,它返回404,您需要先解决这个问题。
请记住,javascript是客户端,所有你想用php做的是吐出标签的地方,让浏览器处理。
可能是路径问题
你的图像(完整)路径是什么?您的页面(完整)路径是什么?
现在它在当前页面下查找图像目录。这是正确的吗?