Rumah

Kesan khas JS

Kesan khas CSS3

CSS3 dan kod jam digital mudah js

Muat turun sekarang Pratonton

kod 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简单数字时钟代码，时分秒上下滚动动画切换网页时钟特效。

Penafian

Semua sumber di laman web ini disumbangkan oleh netizen atau dicetak semula oleh tapak muat turun utama. Sila semak integriti perisian itu sendiri! Semua sumber di laman web ini adalah untuk rujukan pembelajaran sahaja. Tolong jangan gunakannya untuk tujuan komersial. Jika tidak, anda akan bertanggungjawab untuk semua akibat! Jika terdapat sebarang pelanggaran, sila hubungi kami untuk memadamkannya. Maklumat hubungan: admin@php.cn

Artikel Berkaitan

Membuat jam digital berdasarkan Jquery dan CSS3 dengan muat turun kod sumber (CSS3)_jquery

16 May 2016

Jam digital digunakan dalam undur web, kesan jam penggera web dan aplikasi web berdasarkan HTML5 Artikel ini memperkenalkan kepada anda cara membuat jam digital berdasarkan jquery dan css3 dengan muat turun kod sumber.

Cara mahir menggunakan kesan khas CSS3 untuk meningkatkan pengalaman pengguna halaman web

09 Sep 2023

Cara menggunakan kesan khas CSS3 dengan mahir untuk meningkatkan pengalaman pengguna laman web Dengan perkembangan Internet, reka bentuk web dan pengalaman pengguna telah menjadi pautan penting dalam pembangunan laman web. Aplikasi kesan khas CSS3 boleh menambah dinamik dan kesan visual pada halaman web dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan beberapa kesan khas CSS3 biasa dan contoh kodnya untuk membantu pembangun menjadi lebih mahir dalam menggunakan kesan khas CSS3 dan meningkatkan pengalaman pengguna halaman web. Kesan peralihan (Peralihan) Kesan peralihan ialah salah satu kesan khas yang paling asas dalam CSS3 Dengan menukar atribut

putaran kesan css3

27 May 2023

Putaran kesan khas CSS3 Dalam reka bentuk web, kesan khas dinamik boleh meningkatkan interaktiviti dan kesenian halaman web, menjadikan pengguna melayari halaman web dengan lebih gembira. Antaranya, kesan putaran adalah kesan khas yang agak biasa. Dalam CSS3, kesan putaran boleh dicapai melalui atribut transformasi. 1. Gunakan transformasi untuk mencapai putaran Atribut transformasi dalam CSS3 digunakan untuk mencapai kesan ubah bentuk elemen, seperti putaran, pergerakan, penskalaan, dsb. Apabila menyedari kesan putaran elemen, anda boleh menggunakan fungsi putaran putar Sintaks khusus adalah seperti berikut: tra

Membuat jam digital berdasarkan jQuery dan CSS3 dengan muat turun kod sumber (jquery)_jquery

16 May 2016

Artikel ini berdasarkan jquery untuk membuat jam digital benar-benar berjalan, dan melaksanakan versi web jam digital dengan tarikh dan hari dalam seminggu Kesannya sangat realistik.

jQuery melaksanakan kesan khas akordion dengan penstrim kaca texture_jquery

16 May 2016

Artikel ini terutamanya memperkenalkan jQuery untuk melaksanakan kesan khas akordion dengan tekstur strim kaca Ia adalah kesan khas akordion berdasarkan jQuery CSS3. Saya harap anda menyukainya.

Contoh terperinci kesan flop 3D kesan khas css3

16 May 2016

Artikel ini terutamanya memperkenalkan kesan flop 3D kesan khas CSS3 Ia mempunyai nilai rujukan tertentu Rakan-rakan yang berminat boleh merujuknya.

Kod CSS3 untuk melaksanakan kesan box_form log masuk latar belakang dinamik

16 May 2016

Artikel ini memperkenalkan kesan khas kotak log masuk latar belakang dinamik dengan kesan animasi berdasarkan jQuery CSS3 Rakan yang memerlukannya boleh merujuknya.

JS melaksanakan kesan jam digital undur [dengan kod contoh]_kemahiran javascript

16 May 2016

Editor di bawah akan membawakan anda JS untuk melaksanakan kesan jam digital undur [dengan kod contoh]. Editor berpendapat ia agak bagus, jadi saya ingin berkongsi dengan anda sekarang dan memberikannya sebagai rujukan untuk semua orang.

HTML5 css3 bar kemajuan animasi kod kesan khas [disyorkan]_html5 kemahiran tutorial

16 May 2016

Editor di bawah akan berkongsi dengan anda kod kesan khas animasi hitung detik css3 HTML5 css3 [disyorkan]. Semoga ia membantu semua orang. Mari ikuti editor dan lihat.

See all articles