如何在html中引用js脚本中的变量

How can I reference a variable from a js script in html

本文关键字：脚本 变量 js 引用 html      更新时间：2023-09-26

我以前见过类似的问题，但在我的情况下，这些问题都没有真正帮助。简而言之，我，一个新手，正在尝试将html背景颜色更改为在js脚本中创建的变量，但我不太确定如何做到这一点。我想用"颜色"作为背景色。h、 m，s是小时、分和秒。我正在从电脑上提取这些，它正在很好地打印它。以下是我发现的与我想做的几乎相同的东西www.jacopocolo.com/hexclock/

JS-

if (h<=9) {h = '0'+h};
if (m<=9) {m = '0'+m};
if (s<=9) {s = '0'+s};
var color = '#'+h+m+s;
$("div.background").css("background-color", color );

HTML

<style>
.background {
width: 100%;
height: 100%;
position: absolute;
vertical-align: middle;
}
</style>

我尝试过为背景创建一个div（如上所示），但似乎不起作用。最后，我真正要做的就是的这一部分

if (h<=9) {h = '0'+h};
if (m<=9) {m = '0'+m};
if (s<=9) {s = '0'+s};
var color = '#'+h+m+s;

有人能告诉我如何正确地做到这一点，甚至只是给我指明一个大致的方向吗？如有任何帮助，我们将不胜感激。

我试过了，效果很好。

$(document).ready(function(){
    var h = 0;
    var m = 9;
    var s = 20;
    if (h<=9) {h = '0'+h}
    if (m<=9) {m = '0'+m};
    if (s<=9) {s = '0'+s};
    var color = '#'+h+m+s;
    console.log('color' + color);
    console.log("Original Color " + $("div.background").css('background-color'));
    $("div.background").css("background-color", color );
    console.log("Updated Color " + $("div.background").css('background-color'));
});
<html>
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="app.js"></script>
    <style>
        .background {
            width: 100%;
            height: 100%;
            position: absolute;
            vertical-align: middle;
        }
    </style>
    </head>
<body>
    <div class="background">hello world</div>
</body>
</html>

代码中的问题可能是，必须以十六进制坐标给定以'#'预挂的颜色参数：

红色=10，绿色=20和蓝色=40应该这样写：

#0A1428

因此，你必须首先将每个坐标转换为十六进制，如下所示：

var h = h.toString(16);
var m = m.toString(16);
var s = s.toString(16);

然后，执行左零填充，依此类推。

相关文章：