倒计时时钟可以离线正常工作，但不能在线工作
Posted
技术标签:
【中文标题】倒计时时钟可以离线正常工作，但不能在线工作【英文标题】：Countdown clock works properly offline but doesnt work online 【发布时间】：2015-02-14 14:44:01 【问题描述】：我的首页上有一个倒计时时钟，当我离线查看 html 文件时它可以正常显示，但在我的服务器上它不起作用。在服务器上，它将时钟显示为分散在页面上的随机数。这是我的 index.html。时钟是名为dw_clock 的div。在 hero 部分中，我尝试更改样式表在标题中的位置。我也尝试将 css 放入 html 代码本身，但我仍然有问题。我制作了一个只有两个样式表的文件，以查看 Google Chrome 的“检查元素”是否甚至可以看到 Flipclock.css，但它似乎甚至看不到它，只是普通的 style.css。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!--
=================================
STYLESHEETS
=================================
-->
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- WEB FONTS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" />
<!-- ICON FONTS -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/simple-line-icons.min.css" />
<!-- OTHER STYLES -->
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/owl.carousel.min.css" />
<link rel="stylesheet" href="css/nivo-lightbox.min.css" />
<link rel="stylesheet" href="css/nivo-lightbox/default.min.css" />
<!-- MAIN STYLES -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/FlipClock.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- COLORS -->
<link id="color-css" rel="stylesheet" href="css/colors/green.css" />
<!-- <link id="color-css" rel="stylesheet" href="css/colors/turquoise.css" /> -->
<!-- <link id="color-css" rel="stylesheet" href="css/colors/blue.css" /> -->
<!-- <link id="color-css" rel="stylesheet" href="css/colors/purple.css" /> -->
<!-- <link id="color-css" rel="stylesheet" href="css/colors/pink.css" /> -->
<!-- <link id="color-css" rel="stylesheet" href="css/colors/red.css" /> -->
<!-- <link id="color-css" rel="stylesheet" href="css/colors/orange.css" /> -->
<!-- <link id="color-css" rel="stylesheet" href="css/colors/yellow.css" /> -->
<!-- JQUERY -->
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body class="with-preloader">
<!--
=================================
PRELOADER
=================================
-->
<div id="preloader" class="preloader">
<div class="preloader-inner">
<span class="preloader-logo">
<img src="images/logos/preloader-logo.png" />
<strong>Loading</strong>
</span>
</div>
</div>
<div id="document" class="document">
<!--
=================================
HERO SECTION
=================================
-->
<section id="home" class="hero-section hero-layout-2 section parallax-background" data-stellar-background-ratio="0.4">
<!-- BACKGROUND OVERLAY -->
<div class="black-background-overlay"></div>
<div class="container">
<div class="hero-content">
<!-- HERO TEXT -->
<div class="hero-text">
<!-- LOGO -->
<div class="hero-logo wow fadeIn" data-wow-duration="1s">
<img src="images/logos/hero-logo.png" />
</div>
<!-- TAGLINE -->
<h1 class="hero-title wow fadeInUp" data-wow-duration="1s">COMING SOON</h1>
<div class="dw_clock wow fadeInUp" data-wow-duration="1s"></div>
<!-- WATCH THE VIDEO -->
<a href="#subscribe" class="hero-watch-video-link anchor-link wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s"><i class="fa fa-plus"></i>Notify Me When Rhevon Is Released</a>
</div>
</div>
</div>
</section>
<!--
=================================
FOOTER SECTION
=================================
-->
<footer class="footer-section section" section id="contactus">
<!-- COPYRIGHT -->
<div class="copyright">Copyright © . All rights reserved</div>
</div>
</footer>
</div>
<!--
=================================
javascriptS
=================================
-->
<script src="js/Flipclock.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="js/smoothscroll.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.nav.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
有人可以帮我吗，如果需要，我可以上传 style.css 文件和 Flipclock.css 文件（即为时钟提供所有所需样式的文件）我已经删除了大部分网站代码由于 *** 不允许我发布，因为我有太多代码，我还删除了标题，因为我认为问题不是来自那里，而且我也没有包含元数据、页面标题或网站图标
【问题讨论】：
我无法理解 js 和 css 之间的桥梁。你在使用任何 js 吗？ 是的，有一个 js 文件，我只是不明白为什么当我离线查看它时它一切正常，但是当我上网并在我的网站上查看它时它没有正确显示。 js 文件一个是 script.js，一个叫做 Flipclock.min.js 就 js 文件而言，时钟确实可以正常工作，它只是不能正确显示在线非常类似于flipclockjs.com 我的看起来就像离线但网上是这样的：www.rhevon.com 可能是某种浏览器缓存？试过 ctrl + shift + F5 吗？ 不 - 实际上控制台报告您的 Flipclock.css 未加载。检查您的文件是否存在并且您的路径是否正确 Aaa - 请记住，Windows 不关心文件名的大小写敏感度，但在 Linux 服务器上，大小写很重要 - 所以检查一下 【参考方案1】：这是一个文件外壳。
把你的文件名改成http://www.rhevon.com/css/Flipclock.css
这会奏效。
正如我提到的，文件名在 Linux 上是区分大小写的，这就是为什么你在本地 Windows 环境中工作的原因。您的文件名是“Flipclock.css”而不是“FlipClock.css”。
如果对您有帮助，请不要忘记将其标记为有效答案。
【讨论】：
以上是关于倒计时时钟可以离线正常工作，但不能在线工作的主要内容，如果未能解决你的问题，请参考以下文章