在公司工作做第一个项目的收获,拿出来晒晒。

      刚开始工作,第一个中午刚去到就找了本c++的书看了起来(因为我们经理是搞c出身的,我是面试java进来的)。8:30上班(一般都是提前半小时到公司),5:30下班(平均都是20:00左右下班吧)。因为做程序的加班都是很正常的事情。特别是在小公司里,不加班是时候是很少的。明天都是按手印上班和下班。

    中午开了一中午的书,下午就直接开始让我跟着一起做项目了。做的是一个公司的彩信的项目。我负责管理端的开发。主要使用jsp技术开发。做这个项目时发现js太好用了,功能太强大了。用jsp写的代码太乱了。还有就是myeclipse的格式化功能待完善(获取需要设置吧,我没有仔细的研究)。言归正传:经理问我多长时间可以作完,我回答了一个认为保守的时间4到5天。很快功能全实现了,但是界面太难看了。剩下的时间基本就是该界面和完善功能了。可能是做后台的程序员的一个通病吧,前台的界面效果老师处理不出来。因为我们公司没有专门做前台美工这一块的。所有的工作都是程序员自己完成的。这个项目是经理写的分析。我们四个人跟他一起做。刚开始做什么都不懂,经常挨批,不过后来就慢慢少了,因为给你说过一次了,下次就不会反类似的错误了。

  后来交给了客户,提交了两次修改意见,界面占的挺多的。后来又添加了一些查询报表,导出功能。正个项目是不算大,但是用的东西挺多的。

vc,jsp,Oracle,Linux,web service 等等

我们可以将多个关心语句制作成**轮播卡片形式(Carousel Cards)**,让用户在手机上滑动查看每一张温馨的问候。这种设计非常适合微信中打开,视觉清晰、操作简单。 下面我将用纯 HTML + CSS + JavaScript 实现一个轻量、美观、适配移动端的轮播卡片,并支持自动播放手动滑动。 --- ### ✅ 最终效果 - 每张卡片显示一条对亲人的关心语句 - 支持左右滑动切换(移动端友好) - 自动轮播(每 5 秒切换) - 点击左右箭头也可切换 - 使用柔动画过渡 --- ### 🔧 完整代码:`index.html` ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>给亲人的关心卡片</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft YaHei", sans-serif; background: #fdf4ff; color: #444; padding: 20px; height: 100vh; display: flex; justify-content: center; align-items: center; } .carousel { position: relative; width: 100%; max-width: 360px; overflow: hidden; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); } .cards { display: flex; transition: transform 0.5s ease-out; height: 220px; } .card { min-width: 100%; padding: 24px; background: white; display: flex; flex-direction: column; justify-content: center; text-align: center; line-height: 1.8; font-size: 17px; color: #555; } .card strong { color: #e91e63; font-weight: bold; } .card:nth-child(1) { background: #ffebee; } /* 粉红 */ .card:nth-child(2) { background: #e8f5e8; } /* 绿白 */ .card:nth-child(3) { background: #fff3e0; } /* 橙白 */ .card:nth-child(4) { background: #e3f2fd; } /* 蓝白 */ .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255,255,255,0.8); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #e91e63; cursor: pointer; z-index: 10; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } .prev { left: 10px; } .next { right: 10px; } .dots { display: flex; justify-content: center; margin-top: 12px; gap: 6px; } .dot { width: 8px; height: 8px; background: #ccc; border-radius: 50%; transition: background 0.3s; } .dot.active { background: #e91e63; } </style> </head> <body> <div class="carousel"> <div class="cards" id="cards"> <div class="card"> 亲爱的爸妈:<br> 天气转凉了,记得添衣保暖。<br> <strong>我在外面一切都好,就是特别想你们。</strong> </div> <div class="card"> 爸爸:<br> 少抽烟,多散步,<br> <strong>您的健康是我最大的心愿。</strong> </div> <div class="card"> 妈妈:<br> 别总熬夜家务,<br> <strong>您辛苦了一辈子,该好好歇歇了。</strong> </div> <div class="card"> 给最爱的你们:<br> 等我回家,一起吃顿热饭,<br> <strong>聊聊家常,晒晒太阳。</strong> </div> </div> <div class="arrow prev" onclick="prevCard()">❮</div> <div class="arrow next" onclick="nextCard()">❯</div> <div class="dots" id="dots"></div> </div> <script> const cards = document.getElementById('cards'); const cardElements = document.querySelectorAll('.card'); const dotsContainer = document.getElementById('dots'); let currentIndex = 0; // 创建小圆点 cardElements.forEach((_, i) => { const dot = document.createElement('div'); dot.classList.add('dot'); if (i === 0) dot.classList.add('active'); dot.addEventListener('click', () => goToCard(i)); dotsContainer.appendChild(dot); }); const dots = document.querySelectorAll('.dot'); function updateDots() { dots.forEach((dot, i) => { dot.classList.toggle('active', i === currentIndex); }); } function goToCard(index) { currentIndex = index; cards.style.transform = `translateX(-${currentIndex * 100}%)`; updateDots(); } function nextCard() { currentIndex = (currentIndex + 1) % cardElements.length; goToCard(currentIndex); } function prevCard() { currentIndex = (currentIndex - 1 + cardElements.length) % cardElements.length; goToCard(currentIndex); } // 自动轮播(5秒切换一次) setInterval(nextCard, 5000); </script> </body> </html> ``` --- ### 📌 解释说明 | 部分 | 功能 | |------|------| | `.cards` 使用 `flex` + `transform: translateX()` | 实现水平轮播滑动 | | JavaScript 控制 `currentIndex` | 记录当前显示哪一张 | | `setInterval(nextCard, 5000)` | 每 5 秒自动切换下一张 | | 小圆点 `.dots` | 显示当前页码,点击可跳转 | | 左右箭头 | 手动切换卡片,兼容微信内浏览器 | | 卡片不同背景色 | 提升视觉体验,避免单调 | --- ### ✅ 如何部署到 GitHub Pages? 1. 将上面代码保存为 `index.html` 2. 上传到你的 GitHub 仓库(如 `care-cards`) 3. 进入 Settings → Pages → 启用 GitHub Pages(选择 main 分支) 4. 获取链接:`https://<username>.github.io/care-cards/` 5. 发送给亲人微信即可 👍 --- ### 💡 可扩展建议 - 添加图片:在卡片中加入 `<img src="family.jpg" style="width:80%">` - 加入语音祝福:添加一个按钮,点击播放 `.mp3`(需用户交互触发) - 支持手势滑动:引入 [Hammer.js](https://hammerjs.github.io/) 实现更流畅滑动 - 多语言切换:为长辈提供方言或大字体模式 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值