Squarespace:想要在我的标题区域添加倒数计时器

时间:2016-03-11 02:09:02

标签: html css squarespace

所以我决定使用Squarespace为我的婚礼创建一个网站,节省时间,但我没有意识到我对代码本身的限制,我很后悔。

我想让倒数计时器取代顶部的“2017年9月17日”。我有计时器的代码/脚本,但是说明要我制作一个代码块,你不能在这个模板的标题中做。

这是页面:http://www.meetusinthemountains.net/when-where/#details

有一个地方可以插入任何CSS,但它是放置HTML和脚本的地方。每个页面都有“代码注入区域”,但这似乎不起作用。遗憾的是,我不能只访问我自己的HTML文件,除非我升级到商业计划或其他什么。

有什么办法让它进去吗?这是计时器代码:

<div id="timer"> 
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>

   /* COUNTDOWN TIMER CSS */

#timer {
  margin: 0 auto;
  display: table;
  div {
    display: table-cell;
// STYLE NUMBERS
    font-size: 50px;
    letter-spacing: 2px;
    font-weight: 500;
    color: #f65959;
  padding: 20px;
    border-radius: 300px;
    text-align: center;
    span {
// STYLES DAYS, HOURS, MINUTES, SECONDS
      letter-spacing: 0px;
      color: #111111;
  font-size: 20px;
      margin-left: -4px;
      margin-top: 16px;
      display: block;
    }
  }
}
@media (max-width : 667px) {
  #timer {
    div {
      padding: 16px;
      font-size: 26px !important;
      span {
        margin-top: 2px;
        font-size: 12px !important;
      }
    }
  }
}
<script>
function makeTimer() {

var endTime = new Date("December 25, 2015 12:00:00 EST");
var endTime = (Date.parse(endTime)) / 1000;

var now = new Date();
var now = (Date.parse(now) / 1000);

var timeLeft = endTime - now;

var days = Math.floor(timeLeft / 86400); 
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }

$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");

}

setInterval(function() { makeTimer(); }, 1000);
</script>

0 个答案:

没有答案