我需要它在打开页面时自动启动，而不是单击开始。也可以允许用户选择将时间通过电子邮件发回给他们自己，因为它将用于计算他们回答问题所花的时间
<style>
* {margin: 0; padding: 0;}
.container {
padding: 10px;
text-align: center;
}
.timer {
padding: 10px;
background: linear-gradient(top, #222, #444);
overflow: hidden;
display: inline-block;
border: 7px solid #efefef;
border-radius: 5px;
position: relative;
box-shadow:
inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75),
0 5px 20px -10px rgba(0, 0, 0, 1);
}
.cell {
/*Should only display 1 digit. Hence height = line height of .numbers
and width = width of .numbers*/
width: 0.60em;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.numbers {
width: 0.6em;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
/*Glow to the text*/
text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}
/*Styles for the controls*/
#timer_controls {
margin-top: -5px;
}
#timer_controls label {
cursor: pointer;
padding: 5px 10px;
background: #efefef;
font-family: arial, verdana, tahoma;
font-size: 11px;
border-radius: 0 0 3px 3px;
}
input[name=controls] {display: none;}
/*Control code*/
#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}
.moveten {
/*The digits move but dont look good. We will use steps now
10 digits = 10 steps. You can now see the digits swapping instead of
moving pixel-by-pixel*/
animation: moveten 1s steps(10, end) infinite;
/*By default animation should be paused*/
animation-play-state: paused;
}
.movesix {
animation: movesix 1s steps(6, end) infinite;
animation-play-state: paused;
}
/*Now we need to sync the animation speed with time speed*/
/*One second per digit. 10 digits. Hence 10s*/
.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;} /*60 times .second*/
.milisecond {animation-duration: 1s;} /*1/10th of .second*/
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}
.minute {animation-duration: 600s;} /*60 times .second*/
.tenminute {animation-duration: 3600s;} /*60 times .minute*/
.hour {animation-duration: 36000s;} /*60 times .minute*/
.tenhour {animation-duration: 360000s;} /*10 times .hour*/
@keyframes moveten {
0% {top: 0;}
100% {top: -400px;}
/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}
@keyframes movesix {
0% {top: 0;}
100% {top: -240px;}
/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
</style>
<body style="background-color:#000">
<div class="container">
<!-- time to add the controls -->
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<div class="timer">
<div class="cell">
<div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
<!-- Lables for the controls -->
<div id="timer_controls">
<label for="start">Start</label>
最佳答案
您可以使用 JS 代码启动计时器(为了简化使用 jQuery):
// detect page load
$(window).load(function () {
// get start btn and toggle click on it -> start function must be called
$('#start').click();
});
要通过电子邮件向用户发送时间，您必须将此时间保存在变量中，并可能使用 AJXA 将其发送到后端 (PHP)，然后创建此电子邮件并发送它(如果您的服务器可以这样做:))
附言在没有客户的情况下在页面上开始一些事情——这是个坏主意，因为当客户加载页面时——你无法得到 100% 的保证，他就在上面。
最好用 click 启动计时器 - 只有用户可以做到，并且对于测试(就像你的情况一样) - 如果你需要一些分析，点击按钮会给你更好更准确的结果。
关于Java 计时器 - 无论如何将其更改为在打开页面时自动启动而不是单击开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33300137/