所以我决定使用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>