js实现div闪烁-------Day46

本文探讨了使用易UI框架编程的便利性和简洁性,分享了一个关于闪烁原理的实例,并通过代码解析展示了如何仅通过改变元素的display属性实现效果。同时,文章表达了在学习过程中对自身不足的认识,强调了实践与理论结合的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在学着用easyui,发现框架用起来果然是方便简洁,能弄出这框架的都是大神级别了吧,牛啊....

今天碰到这个应用可以说是让我非常之无语,整出源码来一看就明白了,可之前却还是感觉非常神奇,我也常常告诉自己,要多动脑筋,实际上有一些也的确有想过,但实在是效果很牵强,而当源码拿出来看的时候却又格外的明白,如果这时候我可以看到自己的表情,大抵就是一个纠结吧,如果说量变引起质变,那我的量还差的太多了,连见多识广都算不上,何谈创造啊。

先来分析下实现的原理吧,闪烁的原理是什么呢:其实就一个,display在none与block之间频繁的交替,这样说你明白了么。

还是先上代码:

html部分:

 <div style="width: 50px;height: 50px;background-color: cyan;display: block;" id="showZone"></div>//是不是很熟悉啊
javascript部分:

window.onload=function(){
	var obj=document.getElementById("showZone");	
	var timer=null;
	obj.onclick=function(){
		var i=0;
		clearInterval(timer);
		timer=setInterval(function(){
			obj.style.display=i++%2?"none":"block";//还是有收获的,这个写法比if..else想必简单了好多
			i>8&&clearInterval(timer);//这个短路用的经典啊
		},80);
	};
};
虽然原理上简单,但是前辈的代码比我个人编写的代码要简单太多了,还是很有收获的。


easyui也进入学习日程了,这一天天的是越排越满啊......加油,笨鸟飞飞飞.....




<think>嗯,用户想用HTML写一个炫酷的时钟。首先,我得考虑怎么实现这个需求。可能需要用到HTML、CSS和JavaScript的结合。时钟的显示部分可以用HTML结构,比如div元素来表示小时、分钟、秒。样式方面,CSS可以设计外观,比如圆形背景、渐变颜色、字体样式等,让时钟看起来更吸引人。JavaScript则负责动态更新时间,每隔一秒更新一次显示。 接下来,需要考虑如何布局。通常时钟是圆形的,所以应该用CSS的border-radius属性把外层容器变成圆形。然后,可能需要用flex布局来居中显示时间数字。另外,动态效果比如阴影、渐变背景能增加炫酷感,可以考虑添加box-shadow和linear-gradient。 关于时间获取,JavaScript的Date对象可以获取当前的小时、分钟、秒。需要处理个位数的情况,比如秒数为5时显示为05,这可以用padStart方法来实现。然后,每隔一秒用setInterval函数更新一次时间显示。 另外,动画效果可以考虑指针的旋转,比如用CSS的transform和keyframes来实现秒针的平滑转动。或者,使用JavaScript动态计算旋转角度,但可能比较复杂。不过用户可能更希望简单实现,所以先用CSS动画处理秒针,但发现示例中的代码用了JavaScript来更新数字显示,可能暂时不需要指针,而是数字动画。 然后,考虑到视觉效果,可以添加背景渐变和文字阴影。比如,使用radial-gradient作为背景,文字用白色,加上text-shadow增加立体感。外层容器加上box-shadow让整个时钟有悬浮效果。 测试时要注意不同浏览器的兼容性,比如flex布局和渐变背景是否支持。不过现代浏览器一般没问题。响应式设计方面,使用viewport单位和flexible尺寸,让时钟在不同屏幕大小下都能正常显示。 最后,可能需要调整CSS细节,比如过渡效果,让数字变化时有淡入淡出,而不是突然改变。这可以通过CSS的transition属性实现,但示例中可能直接更新了文本内容,所以过渡效果可能需要额外处理,比如用opacity动画。 总结下来,步骤是:创建HTML结构,用CSS设计样式和动画,用JavaScript处理时间和动态更新。然后整合各部分,测试效果,调整细节以达到炫酷的外观。</think>以下是一个使用 HTML、CSS 和 JavaScript 实现的动态炫酷时钟示例(带渐变背景和阴影效果): ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: radial-gradient(circle, #1a1a1a, #000); } .clock { background: rgba(0, 0, 0, 0.7); padding: 2rem 3rem; border-radius: 20px; box-shadow: 0 0 30px rgba(0, 255, 255, 0.5); position: relative; border: 2px solid #00ffff; } .time { font-family: 'Arial', sans-serif; font-size: 4rem; color: #fff; text-shadow: 0 0 10px #00ffff; letter-spacing: 2px; background: linear-gradient(90deg, #00ffff, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .colon { animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .date { color: #fff; text-align: center; font-family: Arial; margin-top: 1rem; opacity: 0.8; } </style> </head> <body> <div class="clock"> <div class="time" id="time"></div> <div class="date" id="date"></div> </div> <script> function updateTime() { const now = new Date(); const timeElement = document.getElementById('time'); const dateElement = document.getElementById('date'); // 格式化时间 const hours = now.getHours().toString().padStart(2, '0'); const minutes = now.getMinutes().toString().padStart(2, '0'); const seconds = now.getSeconds().toString().padStart(2, '0'); // 添加闪烁动画的冒号 timeElement.innerHTML = `${hours}<span class="colon">:</span>${minutes}<span class="colon">:</span>${seconds}`; // 格式化日期 const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; dateElement.textContent = now.toLocaleDateString('zh-CN', options); } // 立即执行一次并设置定时器 updateTime(); setInterval(updateTime, 1000); </script> </body> </html> ``` 主要特性说明: 1. **视觉效果**: - 渐变背景和霓虹文字效果 - 发光边框(cyan色系) - 动态闪烁的冒号分隔符 - 文字阴影和渐变效果 2. **功能特点**: - 显示当前时间(时:分:秒) - 显示完整日期(星期、年月日) - 自动更新(每秒刷新) - 两位数显示(自动补零) 3. **技术亮点**: - 使用 CSS 渐变背景和文字渐变 - 文字阴影实现发光效果 - CSS 动画实现冒号闪烁 - JavaScript Date 对象实时获取时间 - 响应式布局(始终居中显示) 4. **扩展性**: - 可通过修改 CSS 颜色值改变主题色 - 调整 font-size 可改变时钟大小 - 添加更多动画效果(如秒数跳动动画) 这个时钟结合了现代网页设计的常见特性,适合作为网页装饰元素或个人项目使用。你可以通过修改CSS中的颜色值和尺寸参数来创建自己的个性化风格。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值