html怎么写二分钟倒计时,(Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能...

专业的在线倒计时

/*以下为CSS样式设置*/

/*为了代码简洁使用通配符，实际开发不建议使用*/

*{

margin:0;

padding:0;

}

body {

background-image:linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);

}

.ofixed{

position: fixed;

width: 30px;

height: 30px;

background-color: #00ff0f;

top:30%;

opacity:0.1;

border-radius: 14px;

text-align: center;

line-height: 30px;

transition: 1s;

font-size: 12px;

}

.ofixed div{

display: none;

}

.ofixed:hover{

opacity:0.8;

width: 180px;

}

.ofixed:hover div{

display: block;

}

.content {

width: 450px;

height: 100px;

margin: 40px auto0;

display: flex;

justify-content: space-between;

}

.button_content {

width: 450px;

height: 100px;

margin: 10px auto;

display: flex;

justify-content: space-between;

}

input{

width: 80px;

height: 60px;/*border:1px solid blue;*/border-radius: 5px;

border:none;

opacity:0.7;

font-size: 30px;

color: deepskyblue;

text-align: center;

}

button {

width: 100px;

height: 40px;

font-size: 20px;

font-weight: bold;

color: #4caf50;

border: none;

border-radius: 6px;

position: relative;

}

button div{

position: absolute;

top:0;

font:0;

width: 0px;

height: 40px;

background-color:#2b74e2;

transition:0.4s;

opacity:0.5;

}

button:hover div{

width: 100px;

}

span {

font-size: 40px;

position: relative;

top: 3px;

}

#d1 {

width: 900px;

height: 300px;

background-color: blueviolet;

border-radius: 20px;/*text-align: center;*/font-weight: bold;

font-size: 80px;

line-height: 300px;

color:black;

margin:0auto ;

text-align: center;

}

#btn3 {

color: black;

}

这是一个隐藏的彩蛋

时

分

秒

开 始

暂 停

重 置

//获取一次当前系统时间

var current_time =newDate();functionfn1(){//首先获取input输入框的的内容

var ohours = document.getElementById("newhours").value;var ominutes = document.getElementById("newminutes").value;var oseconds = document.getElementById("newseconds").value;//input输入的内容是字符串，把它们相加成时间总的秒数

//把小时转换成相应的毫秒数

var ohours_milli = ohours*60*60*1000;//把输入的分钟转换成相应的毫秒数

var ominutes_millo = ominutes*60*1000;//把输入的转换成相应的毫秒数

var oseconds_milli = oseconds*1000

//累计相加得出用户输入的所有毫秒数

var add_time = ohours_milli+ominutes_millo+oseconds_milli;//通过计时器循环获得新的系统时间

var reset_time = newDate();//current_time获取的系统时间加上用户输入的时间 减去当前系统时间，得到倒计时的效果

var time = current_time.getTime() + add_time -reset_time.getTime();

console.log(time)//通过上面time获取的倒计时毫秒数，分别除以相对数字得到，分、秒以及毫秒

var hours =Math.floor(time/1000/60/60%24);

var minute =Math.floor(time/1000/60%60);var seconds = Math.floor(time/1000%60 );

var milliseconds = Math.floor( time % 60);//获取页面DIv

var odiv = document.getElementById("d1");//小于10在前面加0

if(milliseconds<10){

milliseconds= "0" +milliseconds;

}if(seconds<10){

seconds= "0" +seconds;

}if(minute<10){

minute= "0" +minute;

}if(hours<10){

hours= "0" +hours;

}//将得到结果输入至页面

odiv.innerHTML = (hours + " : " + minute +" : " +seconds + " : " +milliseconds);//一些判断条件

//输入的小时不能大于24小时，24小时等于86400000毫秒

if(time > 86400000){

odiv.innerHTML= ("♥最大小时数为24");

odiv.style.color= "#ffeb3b";

clearInterval(set_reset);

}//当倒计时为0的时候停止计时器

if( time < 0){

odiv.innerHTML= ("♥倒计时结束♥");

odiv.style.color= "red";

clearInterval(set_reset);

}//输入非数字提示

if(isNaN(time)){

odiv.innerHTML= ("♥请输入正确的数字");

odiv.style.color= "#ffeb3b";

clearInterval(set_reset);

}//未输入时间提示

if(ohours==""&& ominutes==""&&oseconds==""){

odiv.innerHTML= ("♥请输入时间,重置再试");

obtn1.innerHTML= "未输时间";

obtn2.innerHTML= "未输时间";

obtn1.disabled=true;

obtn2.disabled=true;

odiv.style.color= "#ffeb3b";

clearInterval(set_reset);

}

}//获取按钮

var obtn1 = document.getElementById("btn1");var obtn2 = document.getElementById("btn2");var obtn3 = document.getElementById("btn3");//鼠标点击执行

obtn1.οnclick= function() {

obtn1.innerHTML= "正在执行";

obtn2.innerHTML= "点击暂停";

set_reset= setInterval("fn1()",100);

console.log(setInterval);//让input的变为只读

document.getElementById("newhours").disabled="turn";

document.getElementById("newminutes").disabled="turn";

document.getElementById("newseconds").disabled="turn";

}

obtn2.οnclick= function() {

clearInterval(set_reset);

obtn1.innerHTML= "点击继续";

obtn2.innerHTML= "已 暂 停"}

obtn3.οnclick= function() {//重新加载当前页面

location.reload()

}