我怎样才能拥有time变量的内容显示为content我的 CSS 中的属性？
JavaScript：
function clock(){
var d = new Date();
var hour = d.getHours();
var min = d.getMinutes();
var time = hour + ":" + min;
}
CSS:
.screen{
position: absolute;
height: 75%;
width: 75%;
background: #98E8EE;
top: 11.5%;
left: 12.5%;
}
.screen::after{
color: #F9F5F4;
font-size: 40px;
content: ;
font-family: Arial;
margin-left: 36.5px;
top: 20px;
position: relative
}
您可以使用 CSS 变量。
我可以用吗： http://caniuse.com/css-variables/embed
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
const updateTime = () => {
var d = new Date();
var hour = d.getHours();
var min = d.getMinutes();
var second = d.getSeconds();
var time = `${hour}:${min}:${second}`;
// set CSS variable
document.documentElement.style.setProperty(`--text`, `'${time}'`);
}
// initial call
updateTime();
// interval to update time
setInterval(updateTime, 1000);
:root {
--text: '----';
}
.container {
position: absolute;
height: 75%;
width: 75%;
background: #98E8EE;
top: 11.5%;
left: 12.5%;
}
.container::after {
content: var(--text);
color: #F9F5F4;
font-size: 40px;
content: ;
font-family: Arial;
margin-left: 36.5px;
top: 20px;
position: relative
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container"></div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
