我目前正在构建一个数字时钟，哇 super 简单，是的，我知道。我想我想要做的是单击电源按钮打开时钟，然后将时钟显示内的时间显示为innerHTML。我想使用设置时间函数中的变量并在 if 语句执行时显示它们。我可以得到一些帮助来解决这个问题吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
/*Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
/*The Body the clock */
#container {
background-color: lime;
/* border: 1px solid black; */
border-radius: 15px;
height: 300px;
position: relative;
left: 400px;
top: 50px;
width: 800px;
}
/**/
#clock-display {
background-color: white;
border: 1px solid rgb(97, 97, 97);
border-radius: 15px;
font-family: 'Righteous', cursive;
font-size: 2em;
height: 100px;
line-height:100px;
position: absolute;
top: 30px;
left: 30px;
width: 400px;
text-align: center;
}
#clock-display:hover {
box-shadow: 0 1px 6px 0#00E4FF, 0 4px 8px 0 #C3FAFF;
}
#powerButton {
background-color: #E7E7E7;
border: 2px solid #F7F7F7;
border-radius: 50%;
color: white;
position: absolute;
height: 100px;
line-height: 102px;
top: 30px;
left: 490px;
width: 100px;
text-align: center;
}
#powerButton:active {
border: 2px solid #B8FDFF;
}
#power-icon {
color: #FF0000;
font-size: 2.7em;
}
#power-icon:hover {
text-shadow: 2px 5px 5px#FF9898;
}
#alarm {
color: white;
border: 1px solid white;
height: 40px;
width: 100px;
position: absolute;
top: 200px;
left: 50px;
}
#text-box {
border: 2px solid gray;
height: 35px;
position: absolute;
top: 200px;
left:175px;
text-align: center;
}
</style>
</head>
<body>
<!-- Basically a container that stores all the data -->
<div id="container">
<!-- The clock display where the time is to be displayed on. -->
<div id="clock-display"></div>
<!-- ------------------------------------------------------------------ -->
<!-- The HTML for the power button -->
<div id="powerButton">
<!-- the span that allows us to use css with the icon -->
<span id="power-icon">
<!-- the icon import from front-awesome ver 4.7.0 -->
<i class="fa fa-power-off" aria-hidden="true"></i>
</span>
</div>
<!-- ------------------------------------------------------------------ -->
<!--Alarm container contains a label and input text box to retrieve your alarm time with audio.-->
<div id="alarm-container">
<label name="text-box">Alarm</label>
<input type="text" id="text-box" name="text-box" placeholder="Enter Time Here"/>
</div>
</div>
<!-- -->
<script type="text/javascript" language="javascript">
// global variables
var clockDisplay = document.getElementById("clock-display");
var powerButton = document.getElementById("power-icon");
var buttonON = document.getElementById("powerButton");
console.log(clockDisplay); //exsists in the console in developer tools.
function settingTime() {
var x = setInterval(function () {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
});
//return hours,minutes,seconds;
}
//button toggle algorithm i came up with that allows you to toggle the button with out built in function or jquery/vanilla api's
function on_Off_Switch() {
let numOfClick = 0;
buttonON.addEventListener('click', function(e) {
console.log(e);
numOfClick += 1;
console.log(numOfClick);
const randArr = ["#00F0FF","red"];
if(numOfClick % 2 === 0) {
powerButton.style.color = randArr[0];//red
powerButton.style.textShadow = "1px 3px 3px #74F7FF, 2px 5px 5px white";
} else {
powerButton.style.color = randArr[1];//bluetooth bluetooth blue
powerButton.style.textShadow = "1px 3px 3px #FF9898, 2px 5px 5px white";
clockDisplay.innerHTML = ""; //where we turn off the audio to the radio if you decide to code it.
}
});
}
function powerButtonToggle () {
let toggle_int = 0;
let z = setInterval(function() {
toggle_int += 1;
console.log(toggle_int);
if(toggle_int % 2 === 0) {
$(powerButton).fadeOut(400, function() {
});
}
else if(toggle_int % 2 === 1) {
$(powerButton).fadeIn(400,function() {
console.log("this function is logging data");
});
}
},1000);
}
//main function
settingTime();
on_Off_Switch();
powerButtonToggle();
</script>
</body>
</html>
最佳答案
您可以使用.innerHTML重写某个标签内的内容。
例如，
document.getElementById("clock-display").innerHTML = date + "; " + hours + ":" + minutes + ":" + seconds;
会将clock-display元素设置为日期和时间。下面是一个示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
/*Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
/*The Body the clock */
#container {
background-color: lime;
/* border: 1px solid black; */
border-radius: 15px;
height: 300px;
position: relative;
left: 400px;
top: 50px;
width: 800px;
}
/**/
#clock-display {
background-color: white;
border: 1px solid rgb(97, 97, 97);
border-radius: 15px;
font-family: 'Righteous', cursive;
font-size: 2em;
height: 100px;
line-height: 100px;
position: absolute;
top: 30px;
left: 30px;
width: 400px;
text-align: center;
}
#clock-display:hover {
box-shadow: 0 1px 6px 0#00E4FF, 0 4px 8px 0 #C3FAFF;
}
#powerButton {
background-color: #E7E7E7;
border: 2px solid #F7F7F7;
border-radius: 50%;
color: white;
position: absolute;
height: 100px;
line-height: 102px;
top: 30px;
left: 490px;
width: 100px;
text-align: center;
}
#powerButton:active {
border: 2px solid #B8FDFF;
}
#power-icon {
color: #FF0000;
font-size: 2.7em;
}
#power-icon:hover {
text-shadow: 2px 5px 5px#FF9898;
}
#alarm {
color: white;
border: 1px solid white;
height: 40px;
width: 100px;
position: absolute;
top: 200px;
left: 50px;
}
#text-box {
border: 2px solid gray;
height: 35px;
position: absolute;
top: 200px;
left: 175px;
text-align: center;
}
</style>
</head>
<body>
<!-- Basically a container that stores all the data -->
<div id="container">
<!-- The clock display where the time is to be displayed on. -->
<div id="clock-display"></div>
<!-- ------------------------------------------------------------------ -->
<!-- The HTML for the power button -->
<div id="powerButton">
<!-- the span that allows us to use css with the icon -->
<span id="power-icon">
<!-- the icon import from front-awesome ver 4.7.0 -->
<i class="fa fa-power-off" aria-hidden="true"></i>
</span>
</div>
<!-- ------------------------------------------------------------------ -->
<!--Alarm container contains a label and input text box to retrieve your alarm time with audio.-->
<div id="alarm-container">
<label name="text-box">Alarm</label>
<input type="text" id="text-box" name="text-box" placeholder="Enter Time Here" />
</div>
</div>
<!-- -->
<script type="text/javascript" language="javascript">
// global variables
var clockDisplay = document.getElementById("clock-display");
var powerButton = document.getElementById("power-icon");
var buttonON = document.getElementById("powerButton");
function settingTime() {
var x = setInterval(function () {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
document.getElementById("clock-display").innerHTML = date + "; " + hours + ":" + minutes + ":" + seconds;
});
}
//button toggle algorithm i came up with that allows you to toggle the button with out built in function or jquery/vanilla api's
function on_Off_Switch() {
let numOfClick = 0;
buttonON.addEventListener('click', function (e) {
numOfClick += 1;
const randArr = ["#00F0FF", "red"];
if (numOfClick % 2 === 0) {
powerButton.style.color = randArr[0];//red
powerButton.style.textShadow = "1px 3px 3px #74F7FF, 2px 5px 5px white";
} else {
powerButton.style.color = randArr[1];//bluetooth bluetooth blue
powerButton.style.textShadow = "1px 3px 3px #FF9898, 2px 5px 5px white";
clockDisplay.innerHTML = ""; //where we turn off the audio to the radio if you decide to code it.
}
});
}
function powerButtonToggle() {
let toggle_int = 0;
let z = setInterval(function () {
toggle_int += 1;
if (toggle_int % 2 === 0) {
$(powerButton).fadeOut(400, function () {
});
}
else if (toggle_int % 2 === 1) {
$(powerButton).fadeIn(400, function () {
});
}
}, 1000);
}
//main function
settingTime();
on_Off_Switch();
powerButtonToggle();
</script>
</body>
</html>关于javascript - 无法让电源按钮与显示屏一起使用以将时间显示为innerHTML？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59259029/