如何将一个JavaScript变量包含在span或bold标签中？ [英] How would I wrap a javascript variable within a span or bold tag?

问题描述

我得到了一些JavaScript，可以创建一个数字时钟进入网页。这是完美的工作，但我试图修改它以包围am / pm后缀（或代码在这个代码中）跨度或粗体标记，以便我可以在CSS中的其余时间不同的样式。

我确信这对于知道他们在做什么但是我真的很挣扎的人来说非常简单。任何帮助，将不胜感激，JavaScript是如下：

  function renderTime（）{
 var currentTime = new Date（ ）; 
 var diem =AM; 
 var h = currentTime.getHours（）; 
 var m = currentTime.getMinutes（）; 
 var s = currentTime.getSeconds（）; 
 setTimeout（'renderTime（）'，1000）; 
 if（h == 0）{
 h = 12; 
}否则如果（h> 12）{
 h = h-12; 
 diem =PM; （m <10）{
 m =0+ m; 
} 
 
 
} 
 if（s <10）{
 s =0+ s; 
} 
 var myClock = document.getElementById（'clockDisplay'）; 
 myClock.textContent = h +：+ m ++ diem; 
 myClock.innerText = h +：+ m ++ diem; 
 var diem = document.createElement（'span'）; 
} 
 renderTime（）; 
  

解决方案

您有几个选择：

使用 innerHTML 而不是innerText。这允许您将HTML标记插入到字符串中：

  myClock.innerHTML = h +：+ m +<跨度>中+ diem +< / span> ;; 
  

使用 appendChild ，并省略 diem endText结尾：

  myClock.innerText = h +：+ m +; 
 var diemSpan = document.createElement（'span'）; 
 diemSpan.innerText = diem; 
 myClock.appendChild（diemSpan）; 
  

最后，您可以在标记中放置一个 clockDisplay 和一个 diem span并适当地访问它们：

标记：

 < span id =clockDisplay-time>< / span> 
< span id =clockDisplay-suffix> < / span> 
< / div> 
  

strong>

  document.getElementById（clockDisplay-time）。innerText = h +：+ m; 
 document.get ElementById（clockDisplay-suffix）。innerText = diem; 
  

I've been given some JavaScript that creates a digital clock to go onto a webpage. This is working perfectly, however I'm trying amend it to wrap the am/pm suffix (or diem in this code) in span or bold tags so that I can style it differently to the rest of the time in the CSS.

I'm sure this would be really simple for someone that knows what they're doing but I'm really struggling. Any help would be appreciated, the JavaScript is below:

function renderTime() {
    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();
    setTimeout('renderTime()',1000);
    if (h == 0) {
        h = 12;
    } else if (h > 12) { 
        h = h - 12;
        diem="PM";
    }

    if (m < 10) {
        m = "0" + m;
    }
    if (s < 10) {
        s = "0" + s;
    }
    var myClock = document.getElementById('clockDisplay');
    myClock.textContent = h + ":" + m + " " + diem;
    myClock.innerText = h + ":" + m + " " + diem;
    var diem = document.createElement('span');
}
renderTime();

解决方案

You have a few options:

Use innerHTML instead of innerText. That allows you to insert HTML tags into the string:

myClock.innerHTML = h + ":" + m + " <span>" + diem + "</span>;

Use appendChild and leave out the diem at the end of the innerText:

myClock.innerText = h + ":" + m + " ";
var diemSpan = document.createElement('span');
diemSpan.innerText = diem;
myClock.appendChild(diemSpan);

Finally, you could put a clockDisplay and a diem span within your markup and access them appropriately:

Markup:

<div id="clockDisplay">
    <span id="clockDisplay-time"></span>
    <span id="clockDisplay-suffix"></span>
</div>

Script:

document.getElementById("clockDisplay-time").innerText = h + ":" + m;
document.getElementById("clockDisplay-suffix").innerText = diem;

这篇关于如何将一个JavaScript变量包含在span或bold标签中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！