样式化JS变量

时间:2016-11-23 14:39:54

标签: javascript html css

这是我找到的一些代码,它运行正常。我的问题是如何设计圣诞节的一部分!'。假设我想把它变成红色或绿色,而剩下的倒计时具有css'输入'下面。



//change the text below to reflect your own,
var before = "Christmas!"
var current = "Today is Christmas. Merry Christmas!"
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")

function countdown(yr, m, d) {
    theyear = yr;
    themonth = m;
    theday = d
    var today = new Date()
    var todayy = today.getYear()
    if (todayy < 1000)
      todayy += 1900
    var todaym = today.getMonth()
    var todayd = today.getDate()
    var todayh = today.getHours()
    var todaymin = today.getMinutes()
    var todaysec = today.getSeconds()
    var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec
    futurestring = montharray[m - 1] + " " + d + ", " + yr
    dd = Date.parse(futurestring) - Date.parse(todaystring)
    dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1)
    dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1)
    dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1)
    dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1)
    if (dday == 0 && dhour == 0 && dmin == 0 && dsec == 1) {
      document.forms.count.count2.value = current
      return
    } else
      document.forms.count.count2.value = "Only " + dday + " days, " + dhour + " hours, " + dmin + " minutes, and " + dsec + " seconds left until " + before
    setTimeout("countdown(theyear,themonth,theday)", 1000)
  }
  //enter the count down date using the format year/month/day
countdown(2016, 12, 25)
&#13;
input {
  position: absolute;
  top: 135px;
  width: 1000px;
  text-align: center;
  color: #21247A;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.0);
}
&#13;
<div class="countdown">
  <form name="count">
    <input type="text" size="69" name="count2">
  </form>
</div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

尝试使用p tag <p id="text" size="69" name="count2"></p>

声明var类似var before = "<span style='color:red;'>Christmas!</span>"

//change the text below to reflect your own,
var before = "<span style='color:red;'>Christmas!</span>"
var current = "Today is Christmas. Merry Christmas!"
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")

function countdown(yr, m, d) {
    theyear = yr;
    themonth = m;
    theday = d
    var today = new Date()
    var todayy = today.getYear()
    if (todayy < 1000)
      todayy += 1900
    var todaym = today.getMonth()
    var todayd = today.getDate()
    var todayh = today.getHours()
    var todaymin = today.getMinutes()
    var todaysec = today.getSeconds()
    var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec
    futurestring = montharray[m - 1] + " " + d + ", " + yr
    dd = Date.parse(futurestring) - Date.parse(todaystring)
    dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1)
    dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1)
    dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1)
    dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1)
    if (dday == 0 && dhour == 0 && dmin == 0 && dsec == 1) {
       document.getElementById('text').innerHTML= current
      return
    } else
      document.getElementById('text').innerHTML= "Only " + dday + " days, " + dhour + " hours, " + dmin + " minutes, and " + dsec + " seconds left until " + before
    setTimeout("countdown(theyear,themonth,theday)", 1000)
  }
  //enter the count down date using the format year/month/day
countdown(2016, 12, 25)
p {
  position: absolute;
  top: 135px;
  width: 1000px;
  text-align: center;
  color: #21247A;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.0);
}
<div class="countdown">
  <form name="count">
    <p id="text" size="69" name="count2"></p>
  </form>
</div>

答案 1 :(得分:2)

除非另有要求,否则我会将其从<input>转移到<div>。这就是我所做的,以及包装圣诞节!的跨度和造型。

如果您尝试将<input>与HTML一起使用,它将无法按预期工作,因为标记不会呈现为HTML而是呈现为文本。

//change the text below to reflect your own,
var before = '<span class="day">Christmas!</span>'
var current = "Today is Christmas. Merry Christmas!"
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
var container = document.querySelector('.countdown');

function countdown(yr, m, d) {
    theyear = yr;
    themonth = m;
    theday = d
    var today = new Date()
    var todayy = today.getYear()
    if (todayy < 1000)
      todayy += 1900
    var todaym = today.getMonth()
    var todayd = today.getDate()
    var todayh = today.getHours()
    var todaymin = today.getMinutes()
    var todaysec = today.getSeconds()
    var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec
    futurestring = montharray[m - 1] + " " + d + ", " + yr
    dd = Date.parse(futurestring) - Date.parse(todaystring)
    dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1)
    dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1)
    dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1)
    dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1)
    if (dday == 0 && dhour == 0 && dmin == 0 && dsec == 1) {
      container.innerHTML = current
      return
    } else
      container.innerHTML = "Only " + dday + " days, " + dhour + " hours, " + dmin + " minutes, and " + dsec + " seconds left until " + before
    setTimeout( function () {
      countdown( theyear, themonth, theday );
    }, 1000)
  }
  //enter the count down date using the format year/month/day
countdown(2016, 12, 25)
.countdown {
  position: absolute;
  top: 135px;
  width: 1000px;
  text-align: center;
  color: #21247A;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.0);
}
.countdown .day {
  color: green;
}
<div class="countdown"></div>

答案 2 :(得分:0)

你可以添加像这样的HTML标签

     document.getElementById("divElementforChristmas").innerHTML = "<h1 class='ChristmasColorClass'>+before+</h1>";

这会将h1标签放在具有ID = divElementforChristmas的div下,其类将为ChristmasColorClass,因此您可以修改部分,也可以使用以下

创建新元素
    document.createElement("h1")