首頁 JS特效 CSS3特效 CSS3和js簡單數字時鐘程式碼

CSS3和js簡單數字時鐘程式碼

CSS3和js簡單數字時鐘程式碼

CSS3和js簡單數字時鐘程式碼

js程式碼

<script>
'use strict';

var size = 86;
var columns = Array.from(document.getElementsByClassName('column'));
var d = undefined,
    c = undefined;
var classList = ['visible', 'close', 'far', 'far', 'distant', 'distant'];
var use24HourClock = true;

function padClock(p, n) {
	return p + ('0' + n).slice(-2);
}

function getClock() {
	d = new Date();
	return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, '');
}

function getClass(n, i2) {
	return classList.find(function (class_, classIndex) {
		return i2 - classIndex === n || i2 + classIndex === n;
	}) || '';
}

var loop = setInterval(function () {
	c = getClock();

	columns.forEach(function (ele, i) {
		var n = +c[i];
		var offset = -n * size;
		ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + size / 2 + 'px))';
		Array.from(ele.children).forEach(function (ele2, i2) {
			ele2.className = 'num ' + getClass(n, i2);
		});
	});
}, 200 + Math.E * 10);
</script>
这是一款简单的自动获取本地时间的css3+js简单数字时钟代码,时分秒上下滚动动画切换网页时钟特效。 

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

利用Css3和Js製作時鐘的程式碼 利用Css3和Js製作時鐘的程式碼

22 Jun 2018

這篇文章主要介紹了利用Css3和Js製作時鐘的程式碼,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

簡單易用的倒數計時js程式碼_javascript技巧 簡單易用的倒數計時js程式碼_javascript技巧

16 May 2016

倒數js程式碼想必大家都有用過,大同小異,本例為大家介紹的是簡單易用的,需要的朋友可以參考下

js猜數字小遊戲的簡單實作程式碼_javascript技巧 js猜數字小遊戲的簡單實作程式碼_javascript技巧

16 May 2016

這篇文章介紹了js猜數字小遊戲的簡單實現代碼,很好玩的遊戲哦,可以看看你的智商 是否驚人額

JS簡單實用的倒數計時效果實作程式碼_javascript技巧 JS簡單實用的倒數計時效果實作程式碼_javascript技巧

16 May 2016

沒有事研究了下倒數計時的效果,因此自己練習了一下,需要的朋友可以參考下

js如何實現簡單的時分秒倒數效果(程式碼範例) js如何實現簡單的時分秒倒數效果(程式碼範例)

23 Oct 2018

這篇文章帶給大家的內容是介紹js如何實現簡單的時分秒倒數效果(程式碼範例)。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

JS實現用戶註冊時獲取簡訊驗證碼和倒數功能的範例程式碼分享 JS實現用戶註冊時獲取簡訊驗證碼和倒數功能的範例程式碼分享

30 Mar 2017

在用戶註冊時,通常需要簡訊驗證碼,而且為了互動效果,也需要增加倒數計時。該如何實現獲取驗證碼倒數功能呢?下面小編跟大家分享JS實作用戶註冊時取得簡訊驗證碼和倒數計時的程式碼,一起看看吧

簡單介紹mysql中concat函數和mysql在欄位前/後增加字串的範例程式碼 簡單介紹mysql中concat函數和mysql在欄位前/後增加字串的範例程式碼

29 Mar 2017

下面小編就為大家帶來一篇淺談mysql中concat函數,mysql在字段前/後增加字串。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟小編過來看看吧

如何熟練運用CSS3特效提升網頁的使用者體驗 如何熟練運用CSS3特效提升網頁的使用者體驗

09 Sep 2023

如何熟練運用CSS3特效提升網頁的使用者體驗隨著網路的發展,網頁設計與使用者體驗成為了網站開發的重要環節。而CSS3特效的應用,可為網頁增添動感與視覺效果,提升使用者體驗。本文將介紹幾種常見的CSS3特效及其程式碼範例,幫助開發者更熟練地運用CSS3特效,提升網頁的使用者體驗。過渡效果(Transition)過渡效果是CSS3中最基本的特效之一,透過改變某個屬

jQuery與CSS3超炫漢堡變形動畫特效 jQuery與CSS3超炫漢堡變形動畫特效

18 Jan 2017

這是一款使用jQuery和CSS3來製作的酷炫漢堡包變形動畫特效。此特效透過jQuery來附加按鈕事件,並透過CSS3 transform和animation來製作動畫特效。

See all articles See all articles

Hot Tools

CSS文字組合成心型動畫特效

CSS文字組合成心型動畫特效

CSS文字組合成心型動畫特效

CSS3 SVG表白花動畫特效

CSS3 SVG表白花動畫特效

SS3 SVG表白花動畫特效是一款情人節動畫特效。

CSS的商城網站常用左側分類下拉導覽選單代碼

CSS的商城網站常用左側分類下拉導覽選單代碼

CSS的商城網站常用左側分類下拉導覽選單代碼

jQuery+CSS3情人節愛心特效

jQuery+CSS3情人節愛心特效

jQuery+CSS3情人節愛心特效是情人節懸掛擺動愛心動畫特效。

css3湯匙撈起湯圓動畫特效

css3湯匙撈起湯圓動畫特效

一碗可愛的湯圓表情,湯匙撈起一個湯圓動畫特效