웹 프론트엔드 JS 튜토리얼 JS는 카운트다운 디지털 시계 효과를 구현합니다. [예제 코드 포함]_javascript 기술

JS는 카운트다운 디지털 시계 효과를 구현합니다. [예제 코드 포함]_javascript 기술

May 16, 2016 pm 03:07 PM
js 카운트다운 숫자 시계

这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS实现的网页倒计时数字时钟效果。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript实现的倒计时时钟</title>
<style>
body,div{margin:0;padding:0;}
body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
#countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(http://www.jb51.net/jscss/demoimg/201210/btn-1.png) no-repeat;}
input.cancel{background-position:0 -50px;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
<script>
window.onload = function ()
{
var oCountDown = document.getElementById("countdown");
var aInput = oCountDown.getElementsByTagName("input")[0];
var timer = null;
aInput.onclick = function ()
{
this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
this.className = this.className == '' ? "cancel" : '';
};
function format(a)
{
return a.toString().replace(/^(\d)$/,'0$1')
}
function updateTime ()
{
var aSpan = oCountDown.getElementsByTagName("span");
var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));
if(oRemain <= 0)
{
clearInterval(timer);
return
}
oRemain--;
aSpan[0].innerHTML = format(parseInt(oRemain / 60));
oRemain %= 60;
aSpan[1].innerHTML = format(parseInt(oRemain));
}
}
</script>
</head>
<body>
<div id="countdown">
<span>01</span>分钟<span>40</span>秒
<input type="button" value="" />
</div>码农教程 www.manongjc.com 代码特效
</body>
</html>
로그인 후 복사

以上这篇JS 实现倒计时数字时钟效果【附实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

iPhone에 시계 앱이 없습니다. 해결 방법 iPhone에 시계 앱이 없습니다. 해결 방법 May 03, 2024 pm 09:19 PM

iPhone에 시계 앱이 없습니다. 해결 방법

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. 주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 Dec 18, 2023 pm 03:39 PM

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 Dec 17, 2023 am 08:08 AM

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법

Win10을 부팅할 때 10초 카운트다운을 취소하는 방법 Win10을 부팅할 때 카운트다운을 취소하는 세 가지 방법이 있나요? Win10을 부팅할 때 10초 카운트다운을 취소하는 방법 Win10을 부팅할 때 카운트다운을 취소하는 세 가지 방법이 있나요? Feb 29, 2024 pm 07:25 PM

Win10을 부팅할 때 10초 카운트다운을 취소하는 방법 Win10을 부팅할 때 카운트다운을 취소하는 세 가지 방법이 있나요?

js와 vue의 관계 js와 vue의 관계 Mar 11, 2024 pm 05:21 PM

js와 vue의 관계

win10 컴퓨터 시계가 항상 정확하지 않으면 어떻게 해야 합니까? win10 컴퓨터 시간을 조정하는 몇 가지 방법이 있습니까? win10 컴퓨터 시계가 항상 정확하지 않으면 어떻게 해야 합니까? win10 컴퓨터 시간을 조정하는 몇 가지 방법이 있습니까? Mar 27, 2024 pm 05:10 PM

win10 컴퓨터 시계가 항상 정확하지 않으면 어떻게 해야 합니까? win10 컴퓨터 시간을 조정하는 몇 가지 방법이 있습니까?

See all articles