显示时间的代码

小九九 · 发表于 2023-9-12 13:54:38

<!DOCTYPE html>
<html>
<head>
<title>显示时间</title>
<style>
body {
background-color: #1e1e1e;
font-family: 'Roboto', 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden; /* 添加了隐藏滚动条的样式 */
}
#clock {
font-size: 150px;
color: #ffffff;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
#particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<div id="clock"></div>
<div id="particles"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
var clock = document.getElementById('clock');
function updateClock() {
var now = new Date();
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var seconds = now.getSeconds().toString().padStart(2, '0');
var time = hours + ':' + minutes + ':' + seconds;
clock.textContent = time;
}
setInterval(updateClock, 1000);
particlesJS('particles', {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#ffffff'
},
shape: {
type: ['circle', 'triangle', 'polygon'],
stroke: {
width: 0,
color: '#000000'
},
polygon: {
nb_sides: 5
},
},
opacity: {
value: 0.8,
random: true,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: '#ffffff',
opacity: 0.6,
width: 1
},
move: {
enable: true,
speed: 3,
direction: ['none', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'],
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 200,
line_linked: {
opacity: 1
}
},
push: {
particles_nb: 4
},
}
},
retina_detect: true
});
// 添加双击全屏功能
var isFullScreen = false;
document.addEventListener('dblclick', toggleFullScreen);
function toggleFullScreen() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var exitFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
if (!isFullScreen) {
if (requestFullScreen) {
requestFullScreen.call(docEl);
}
} else {
if (exitFullScreen) {
exitFullScreen.call(doc);
}
}
isFullScreen = !isFullScreen;
}
</script>
</body>
</html>

复制代码

小九九 · 发表于 2023-9-12 13:55:04

这是一个使用HTML和JavaScript编写的显示时间的网页代码。它会在页面上显示当前的时间，并且还添加了粒子效果的背景。

代码的主要部分是JavaScript部分，其中使用了setInterval函数定时更新页面上显示的时间。通过获取当前时间的小时、分钟和秒数，并使用textContent将其显示在clock元素中。

另外，该代码还使用了particles.js库来创建粒子效果的背景。具体的粒子设置可以在JavaScript代码中的particlesJS函数中进行调整。

此外，代码还添加了一个双击全屏功能，通过监听dblclick事件来切换全屏状态。

请注意，这段代码只是一个静态的网页示例，并不能在此环境中直接运行。如果你想尝试运行它，可以将代码保存为.html文件，然后在浏览器中打开该文件，即可看到效果。

		自动登录	找回密码
密码			立即注册

显示时间的代码

浏览过的版块

扫码关注左侧公众号，每月定期发送扩容福利码。