<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时器</title>
<style type="text/css">
body{
font-family: sans-serif;
color:#333;
}
#container{
width:400px;
margin:auto;
}
h1{
font-size:5em;
}
</style>
</head>
<body>
<div id="container">
<!--<div id="inputArea"></div>-->
<form id="frm">
<input id="minutes" type="text"/>
<input id="button" type="button" value="开始"/>
</form>
<h1 id="time">0:00</h1>
</div>
<!--<script type="text/javascript">
var secondsRemaining; //剩余秒
var intervalHandle;//手动设置时间间隔
//刚开始 和最后都要先显示输入框 所以先 获取他
function resetPage(){
document.getElementById("inputArea").style.display="block";
}
//实现效果：1：判断输入的是否为数字
//如何判断 需要先获取输入的内容
function startCountdown(){
//获取的输入框的内容是用js创建的，也可以直接在html中创建
var minutes=document.getElementById("minutes").value;
//现在获取到了输入框中的内容，要进行判断
if(isNaN(minutes)){
alert("请输入数字！！！");
return;//运行出错 强制返回
}
//判断为数字后 输入的数字代表的是分钟 要将其转化为秒 这里按秒计算
secondsRemaining=minutes*60; /*可以直接在这里定义secondsRemaining 然后在下面用吗?*/
//过一秒 调用 tick 然后实现tick中的效果 tick中的效果为每过一秒，秒数减去1，并且出现规定的样式
//并且判断分与秒处数字的变化
intervalHandle=setInterval(tick,1000);
//调用完实现效果之后 紧接着将输入框隐藏 2345：先调用 再隐藏
document.getElementById("inputArea").style.display="none";
}
// 2：为数字后 开始计时 并且将时间显示为规定的样式
function tick(){
//先获取规定的样式
var timeDisplay=document.getElementById("time");
// 3：分上如何计时 秒上如何计时
//然后按照样式写代码 floor:不四舍五入 直接取整 在用某个东西的时候要先进行定义
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining-(min * 60);
//然后判断秒数小于10的情况
if(sec<10){
sec="0"+sec;/*为什么将零变为字符串*/
}
var message=min +":"+sec;
//有了样式 将其显示在time的位置
timeDisplay.innerHTML=message;
// 4：计时结束 剩余时间变为零时进行判断 变为零计时结束 不为零秒数减1
// 5：计时结束 清除计时器 并弹框提示
if(secondsRemaining===0){
alert("时间到！！！");
clearInterval(intervalHandle);/* ? */
resetPage();//时间到了 重新显示输入框
}
secondsRemaining--;
}
window.onload = function(){
//输入框输入的均为分 在js中这样写输入框
var inputMinutes =document.createElement("input");
inputMinutes.setAttribute("id","minutes");
inputMinutes.setAttribute("type","text");
//在js中这样写button
var startButton= document.createElement("input");
startButton.setAttribute("type","button");
startButton.setAttribute("value","开始");
//点击开始后调用计时器 getContent,之后再getContent里面调用tick
startButton.onclick = function(){
startCountdown();
};
//上面调用完 计时结束后
// 6：输入框复位
document.getElementById("inputArea").appendChild(inputMinutes);
document.getElementById("inputArea").appendChild(startButton);
};
</script>-->
<script>
var secondsRemaining; //剩余秒
var intervalHandle;//手动设置时间间隔
function resetPage() {//复位页面
document.getElementById("frm").style.display = "block";
}
function tick() {//记号 钟表滴答声
// grab the h1 抓取h1
var timeDisplay = document.getElementById("time");//timeDisplay 是显示时间
// turn seconds into mm:ss 将秒变成这种形式
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining - (min * 60);
// add a leading zero (as a string value) if seconds less than 10 如果小于十秒 将前一位变为零
if (sec < 10) {
sec = "0" + sec;
}
// concatenate with colon 用冒号连接在一起
var message = min + ":" + sec;
// now change the display 改变显示
timeDisplay.innerHTML = message;
// stop if down to zero
if (secondsRemaining === 0) {
alert("Done!");
clearInterval(intervalHandle);
resetPage();
}
// subtract from seconds remaining
secondsRemaining--;
}
function startCountdown() {
// get contents of the "minutes" text box 获得方框中输入的内容
var minutes = document.getElementById("minutes").value;
// check if not a number
if (isNaN(minutes)) {
alert("Please enter a number!");
return;
}
// how many seconds?
secondsRemaining = minutes * 60;
// every second, call the "tick" function 每一秒都要调用tick事件
intervalHandle = setInterval(tick, 1000);
// hide the form 调用后隐藏方框
document.getElementById("frm").style.display = "none";
}
// as soon as the page is loaded...
window.onload = function () {
document.getElementById("button").onclick = function () {
startCountdown();
</script>
</body>
<html>
<head>
<meta charset="utf-8">
<title>倒计时器</title>
<style type="text/css">
body{
font-family: sans-serif;
color:#333;
}
#container{
width:400px;
margin:auto;
}
h1{
font-size:5em;
}
</style>
</head>
<body>
<div id="container">
<!--<div id="inputArea"></div>-->
<form id="frm">
<input id="minutes" type="text"/>
<input id="button" type="button" value="开始"/>
</form>
<h1 id="time">0:00</h1>
</div>
<!--<script type="text/javascript">
var secondsRemaining; //剩余秒
var intervalHandle;//手动设置时间间隔
//刚开始 和最后都要先显示输入框 所以先 获取他
function resetPage(){
document.getElementById("inputArea").style.display="block";
}
//实现效果：1：判断输入的是否为数字
//如何判断 需要先获取输入的内容
function startCountdown(){
//获取的输入框的内容是用js创建的，也可以直接在html中创建
var minutes=document.getElementById("minutes").value;
//现在获取到了输入框中的内容，要进行判断
if(isNaN(minutes)){
alert("请输入数字！！！");
return;//运行出错 强制返回
}
//判断为数字后 输入的数字代表的是分钟 要将其转化为秒 这里按秒计算
secondsRemaining=minutes*60; /*可以直接在这里定义secondsRemaining 然后在下面用吗?*/
//过一秒 调用 tick 然后实现tick中的效果 tick中的效果为每过一秒，秒数减去1，并且出现规定的样式
//并且判断分与秒处数字的变化
intervalHandle=setInterval(tick,1000);
//调用完实现效果之后 紧接着将输入框隐藏 2345：先调用 再隐藏
document.getElementById("inputArea").style.display="none";
}
// 2：为数字后 开始计时 并且将时间显示为规定的样式
function tick(){
//先获取规定的样式
var timeDisplay=document.getElementById("time");
// 3：分上如何计时 秒上如何计时
//然后按照样式写代码 floor:不四舍五入 直接取整 在用某个东西的时候要先进行定义
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining-(min * 60);
//然后判断秒数小于10的情况
if(sec<10){
sec="0"+sec;/*为什么将零变为字符串*/
}
var message=min +":"+sec;
//有了样式 将其显示在time的位置
timeDisplay.innerHTML=message;
// 4：计时结束 剩余时间变为零时进行判断 变为零计时结束 不为零秒数减1
// 5：计时结束 清除计时器 并弹框提示
if(secondsRemaining===0){
alert("时间到！！！");
clearInterval(intervalHandle);/* ? */
resetPage();//时间到了 重新显示输入框
}
secondsRemaining--;
}
window.onload = function(){
//输入框输入的均为分 在js中这样写输入框
var inputMinutes =document.createElement("input");
inputMinutes.setAttribute("id","minutes");
inputMinutes.setAttribute("type","text");
//在js中这样写button
var startButton= document.createElement("input");
startButton.setAttribute("type","button");
startButton.setAttribute("value","开始");
//点击开始后调用计时器 getContent,之后再getContent里面调用tick
startButton.onclick = function(){
startCountdown();
};
//上面调用完 计时结束后
// 6：输入框复位
document.getElementById("inputArea").appendChild(inputMinutes);
document.getElementById("inputArea").appendChild(startButton);
};
</script>-->
<script>
var secondsRemaining; //剩余秒
var intervalHandle;//手动设置时间间隔
function resetPage() {//复位页面
document.getElementById("frm").style.display = "block";
}
function tick() {//记号 钟表滴答声
// grab the h1 抓取h1
var timeDisplay = document.getElementById("time");//timeDisplay 是显示时间
// turn seconds into mm:ss 将秒变成这种形式
var min = Math.floor(secondsRemaining / 60);
var sec = secondsRemaining - (min * 60);
// add a leading zero (as a string value) if seconds less than 10 如果小于十秒 将前一位变为零
if (sec < 10) {
sec = "0" + sec;
}
// concatenate with colon 用冒号连接在一起
var message = min + ":" + sec;
// now change the display 改变显示
timeDisplay.innerHTML = message;
// stop if down to zero
if (secondsRemaining === 0) {
alert("Done!");
clearInterval(intervalHandle);
resetPage();
}
// subtract from seconds remaining
secondsRemaining--;
}
function startCountdown() {
// get contents of the "minutes" text box 获得方框中输入的内容
var minutes = document.getElementById("minutes").value;
// check if not a number
if (isNaN(minutes)) {
alert("Please enter a number!");
return;
}
// how many seconds?
secondsRemaining = minutes * 60;
// every second, call the "tick" function 每一秒都要调用tick事件
intervalHandle = setInterval(tick, 1000);
// hide the form 调用后隐藏方框
document.getElementById("frm").style.display = "none";
}
// as soon as the page is loaded...
window.onload = function () {
document.getElementById("button").onclick = function () {
startCountdown();
};
};
</script>
</body>
</html>
这是效果
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
