使用 JQuery 获取 div 内的时间数字

Question

我在wordpress上建立电子商务网站，我想设计woocommerce预购倒计时。 Countdown是由Keith Wood使用jQuery Countdown创建的。我需要的是只设置数字样式：更改它们的大小和背景。我不熟悉Jquery，我不知道如何拆分文本或类似的东西。另外，我不知道这真的可能吗。

<div class="woocommerce-pre-orders-countdown hasCountdown" id="woocommerce-pre-orders-countdown-1592892000">  6 Days 22 Hours 58 Minutes 12 Seconds</div>

Answer 1

var txt = $('.hasCountdown').text();
var splited = txt.split('');
var flag = true;
var man = '';
var st = '';
for (var i = 0; i < splited.length; i++) {
if ((48 >= splited[i].charCodeAt(0)) || (splited[i].charCodeAt(0) <= 57)) {
st += splited[i];
flag = false;
} else {
flag = true;
}
if (flag && st) {
man += '&nbsp<span style="font-size:40px;background:red">' + st + '</span>&nbsp' + splited[i];
st = '';
} else {
if (flag && !st) {
man += splited[i];
}
}
}
$('.hasCountdown').html(man);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-pre-orders-countdown hasCountdown" id="woocommerce-pre-orders-countdown-1592892000"> 6 Days 22 Hours 58 Minutes 12 Seconds</div>

Answer 2

这是一个香草味的解决方案，它抓取div 的内容，包装每个数字是一个样式化的 span 元素，并用新版本覆盖div 内容。

您可以通过更改sizeMultiplier和background变量的值来选择首选大小和颜色。使用 CSS 类来提供格式会更干净(脚本只会应用 CSS 类(，但我不知道修改 CSS 文件有多容易。

有关进一步的说明，请参阅代码内注释。

let
// Options -- these determine the number formatting
sizeMultiplier = 1.5,
background = "lightskyblue";
const
// Identifies HTML elements
element = document.getElementById("my-div"),
tempDiv = document.createElement("div"),
btn = document.querySelector('button');
// Makes button work for demo
btn.addEventListener('click', formatNums);
// Replaces HTML in element with formatted version
function formatNums(){
// Makes array from div contents, then converts item to DOM nodes
const tokens = element.textContent.split(" ");
const nodes = tokens.map( (token) =>
// Numbers get formatted, other text is left as-is
isNum(token)
? numSpan(token, sizeMultiplier, background)
: textNode(token)
);
// Puts all the nodes into an empty div
nodes.forEach( (node, i) => {
tempDiv.appendChild(node);
tempDiv.insertAdjacentHTML("beforeend",
i < nodes.length - 1 ? " " : ""
);
});
// Replaces contents of original element
element.innerHTML = tempDiv.innerHTML;
}
// Tests whether each item is a number
function isNum(token){
return parseFloat(token) < Infinity
}
// Makes basic nodes for regular text
function textNode(word){
return document.createTextNode(word);
}
// Makes a styled span for a number
function numSpan(num, size, color){
const span = document.createElement("span");
span.style.fontSize = size +"em";
span.style.padding = size/4 + "ch"; // Makes background wider than num
span.style.backgroundColor = color;
span.textContent = num;
return span;
}

button{ margin: 10px; border-radius: 0.3em; }

<button>APPLY FORMATTING</button>
<div id="my-div"> 6 Days 22 Hours 58 Minutes 12 Seconds</div>