Question

对于CSS和JavaScript，我是一个相当新的人。我发现了一个整齐的倒数计时器添加到我的网站，但我不确定如何将它添加到我想要的位置。

您可以在此处查看计时器：https://jsfiddle.net/ft8zoghr/1/

CSS：

html,body{margin:0px;padding:0px}
#cdt a img{border:0}
#cdt .demo{position:absolute;z-index:999;right:0;top:0}
#cdt #ie-fix{display:none}
#cdt .digit{background-image:url(https://d3qhtuwg866bv9.cloudfront.net/oc-sprite?bg_color=00000000&amp;date_label=&amp;encoding=png&amp;font=Kelly+Slab&amp;font_push_down=0.01&amp;height=90&amp;overlay_size=700%2C180&amp;quality=0.95&amp;renderer=v1&amp;scale=1.124&amp;shadow=1&amp;shadow_blur=4&amp;shadow_color=ffffff77&amp;shadow_y=0&amp;style=TemplateDigits01&amp;text_align=center&amp;title=&amp;txt_color=ffffffFF&amp;unit_labels=DAYS%2CHOURS%2CMINUTES%2CSECONDS&amp;use_overlay=1&amp;width=393);background-repeat:no-repeat;width:34px}
#cdt .digit-0{background-position:-315px -450px}
#cdt .digit-1{background-position:0px -405px}
#cdt .digit-2{background-position:-315px -360px}
#cdt .digit-3{background-position:0px -315px}
#cdt .digit-4{background-position:-315px -270px}
#cdt .digit-5{background-position:0px -225px}
#cdt .digit-6{background-position:-315px -180px}
#cdt .digit-7{background-position:0px -135px}
#cdt .digit-8{background-position:-315px -90px}
#cdt .digit-9{background-position:0px -45px}
#cdt .digit-x{width:17px;background-position:-730px -64px}
#cdt.widget-wrapper{width:393px;height:90px;position:relative;margin:auto}
#cdt .content-wrapper{width:100%;height:100%;background-position:0 -40px}
#cdt .spr{background-image:url(https://d29am0ph5s0t8u.cloudfront.net/production/cdt/widgets/sprites/image/1405744/oc-sprite.png?version=57509bf5-6)}@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)
{#cdt .spr{background-image:url(https://d29am0ph5s0t8u.cloudfront.net/production/cdt/widgets/sprites/retina_image/1405744/oc-sprite.png?version=57509bf5-6);background-size:899px 202px}}
#cdt .counter-wrapper{width:374px;height:45.0px;margin-left:19px}
#cdt .counter-wrapper .counter-item{height:48px;float:left}
#cdt .counter-wrapper .counter-group{height:67px;float:left;position:relative;overflow:hidden}
#cdt .counter-group .unit-label{position:absolute;height:25px;width:67px;left:0;top:46px}
#cdt .days .unit-label{background-position:-393px -128px}
#cdt .hours .unit-label{background-position:-461px -128px}
#cdt .minutes .unit-label{background-position:-528px -128px}
#cdt .seconds .unit-label{background-position:-596px -128px}
#cdt .header{height:19px;width:100%}

HTML：

<div id="cdt" class='widget-wrapper'>
<div class='content-wrapper spr'>
        <div class='header'>
        </div>
        <div class='counter-wrapper'>

            <div class='days counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='hours counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='minutes counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='seconds counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>

        </div>
    </div>
</div>

使用Javascript：

Too long to put here

在我的网站文件中，我使用适当的编码创建了count.css文件和count.js文件。我只是想知道我必须将它们放在我的网站index.html文件中，以便显示该计数器。

非常感谢！

Answer 1

我想一些1分钟的研究可以解决这个问题但是你走了：

将它放在你的 - 标签中：

<link rel="stylesheet" href="count.css">

这就在你关闭之前--Tag：

<script src="count.js"></script>

Answer 2

将它们放在页脚中。应该最后加载脚本才能正常运行。不是这个案子，但更安全，然后抱歉。

<script src = "example.js"></script>

Answer 3

不完全确定您要问的是什么，但是您想要将html放在<body>标签

的某个地方

实施例

    <!DOCTYPE html>
    <html>
    <head>
      <!--css and js stuff-->
      <link rel="stylesheet" href="count.css">
    </head>
    <body>
      <!--THE HTML GOES HERE-->
      <script src="count.js"></script>
    </body>
    </html>

Answer 4

你必须按照以下方式做点什么：

std::pair

Answer 5

最好在html标签关闭后添加js，最好是在body标签关闭之前。否则，如果执行脚本时HTML尚未就绪，则会出现错误。把你放在头标签之间。

<html>
<head>
<link rel="stylesheet" href="count.css">
</head>
<body>
<div id="cdt" class='widget-wrapper'>
<div class='content-wrapper spr'>
        <div class='header'>
        </div>
        <div class='counter-wrapper'>

            <div class='days counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='hours counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='minutes counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>
            <div class='counter-item'></div>
            <div class='seconds counter-group'>
                <div class='counter-item'></div>
                <div class='counter-item'></div>
                <div class='unit-label spr'>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="count.js"></script>
</body>
</html>

如何在HTML文件中调用CSS和Javascript？

5 个答案: