程序员送浪漫表白的自动刷新js资源-CSDN文库

共5个文件

js：3个

html：1个

css：1个

需积分: 50 142 浏览量 2018-04-16 22:11:55 上传评论收藏 30KB ZIP 举报

【程序员送浪漫表白的自动刷新js】是一种利用JavaScript（js）编程语言来创造浪漫情境的技术实践。在描述中提到，这个js代码是为程序员提供的一种独特方式，通过自定义姓名和相识日期，来向另一半表达情感，特别是在电脑端展现时，能够自动刷新页面，持续更新表达爱意的信息，营造出温馨的氛围。对于不熟悉技术的女生来说，这种创意可能会带来惊喜和感动；然而，对于熟悉前端开发的人来说，可能认为这种方式较为基础。我们要理解JavaScript是一种运行在客户端的脚本语言，广泛应用于网页和网络应用开发。在这个浪漫表白的场景中，JavaScript的主要功能可能是实现以下几点： 1. **页面动态刷新**：JavaScript 可以通过 `setInterval` 函数设置定时器，每隔一定时间（例如几秒钟）自动刷新页面内容。这样，表白的文字或图片就会不断更新，增加互动感。 2. **个性化定制**：程序员可以修改代码中的变量，将“我的名字”、“你的名字”和“我们的相识日期”替换为实际内容，使得表白更加个性化。 3. **动画效果**：JavaScript 还可以结合CSS（层叠样式表）实现动态的视觉效果，如淡入淡出、滑动等，增强表白的视觉冲击力。 4. **交互设计**：如果希望用户有一些交互体验，比如点击按钮触发表白，可以使用JavaScript的事件监听函数，如 `addEventListener`，响应用户的操作。 5. **DOM操作**：通过JavaScript对Document Object Model（DOM）进行操作，可以改变HTML元素的内容、样式或者位置，实现动态显示表白信息。 6. **AJAX异步请求**：如果想要在页面刷新时获取服务器上的实时信息，比如天气、时间等，可以使用AJAX进行异步数据交换，使得表白页面更生动。 7. **音频/视频控制**：如果表白过程中包含背景音乐或视频，JavaScript还可以用来控制这些媒体的播放、暂停、音量等。尽管对于前端开发者而言，这样的技术手段可能显得简单，但它体现的是程序员用技术表达情感的创意。不过，值得注意的是，过于频繁的页面刷新可能会对用户体验造成负面影响，因此在实际应用中需要适当调整刷新频率，保证浪漫的同时也要考虑性能和用户体验。 "程序员送浪漫表白的自动刷新js"是一个巧妙地结合了技术与情感的示例，它展现了JavaScript作为编程工具的灵活性和创造性，同时也提醒我们，技术在日常生活中的应用无处不在，甚至可以成为传达爱意的桥梁。

资源推荐

资源详情

资源评论

收起资源包目录

致小仙女--自动刷新.zip （5个子文件）

致小仙女--自动刷新

index.html 4KB

garden.js 7KB

functions.js 4KB

jquery.js 70KB

css

default.css 1KB

<!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>致小仙女 </title> <style type="text/css"> @font-face { font-family: digit; src: url('digital-7_mono.ttf') format("truetype"); } </style> <link href="css/default.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/garden.js"></script> <script type="text/javascript" src="js/functions.js"></script> </head> <body onload="setTimeout('document.location.reload();',45000)"> <div id="mainDiv"> <div id="content"> <div id="code"> <span class="comments">/**</span><br /> <span class="space"/><span class="comments">*2018—03-21</span><br /> <span class="space"/><span class="comments">*/</span><br /> Boy name = <span class="keyword">Mr</span> 陈<br /> Girl name = <span class="keyword">Mrs</span> 胡<br /> 其实天很蓝，阴云总要散.<br /> 其实海不宽，彼岸连此岸;<br /> 其实梦很浅，万物皆自然.<br /> 其实泪也甜，当你心如愿;<br /> <span class="AGY">静女其姝，俟我于城隅。爱而不见，搔首踟蹰。<br /></span> <span class="AGY">静女其娈，贻我彤管。彤管有炜，说怿女美。<br /></span> <span class="AGY">自牧归荑，洵美且异。匪女之为美，美人之贻。<br /></span> <span class="keyword">如何让你遇见我，在我最美丽的时刻。为这，我已在佛前求了五百年，求他让我们结一段尘缘。<br /></span> <span class="keyword">都道是金玉良缘，俺只念木石前盟。空对著，山中高士晶莹雪；终不忘，世外仙姝寂寞林。<br /></span> <span class="keyword">只愿君心似我心，定不负相思意。<br /></span> <span class="keyword">死生契阔，与子成说。执子之手，与子偕老。<br /></span> <span class="CSQ">你侬我侬，忒煞多情 <br /></span> <span class="CSQ">情多处，热似火 <br /></span> <span class="CSQ">把一块泥，捻一个你，塑一个我 <br /></span> <span class="CSQ">将咱们两个一齐打破 <br /></span> <span class="CSQ">用水调和 <br /></span> <span class="CSQ">再捏一个你，在塑一个我 <br /></span> <span class="CSQ">我泥中有你，你泥中有我 <br /></span> <span class="CSQ">与你生同一个衾，死同一个椁。<br /></span> <br> <br> I want to say:<br /> Babies, I love you forever;<br /> </div> <div id="loveHeart"> <canvas id="garden"></canvas> <div id="words"> <div id="messages"> 亲爱的，这是我们相遇的时光。 <div id="elapseClock"></div> </div> <div id="loveu"> 爱你直到永永远远。<br/> <div class="signature">- 陈先生</div> </div> </div> </div> </div> </div> <script type="text/javascript"> var offsetX = $("#loveHeart").width() / 2; var offsetY = $("#loveHeart").height() / 2 - 55; var together = new Date(); together.setFullYear(2018,1,21); together.setHours(20); together.setMinutes(0); together.setSeconds(0); together.setMilliseconds(0); if (!document.createElement('canvas').getContext) { var msg = document.createElement("div"); msg.id = "errorMsg"; msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; document.body.appendChild(msg); $("#code").css("display", "none") $("#copyright").css("position", "absolute"); $("#copyright").css("bottom", "10px"); document.execCommand("stop"); } else { setTimeout(function () { startHeartAnimation(); }, 5000); timeElapse(together); setInterval(function () { timeElapse(together); }, 500); adjustCodePosition(); $("#code").typewriter(); } </script> <div style="text-align:center;clear:both"> </div> </body> </html>

评论收藏

内容反馈