找到
165
篇与
站长可乐
相关的结果
- 第 10 页
-
小程序纯CSS实现用户中奖名单无限滚动 + JS随机生成中奖用户名称 CSS无限滚动中奖人员名单，保持一个理念能用css实现的东西坚决不用js； 滚动的核心3个容器和animation动画 <template> <view> <!-- 外围容器 --> <view class="one"> <!-- 人员列表容器 --> <view class="two"></view> <!-- 重复人员列表容器是实现无缝滚动 --> <view class="two"> </view> </view> </view> </template> <style> .two { animation: myAnimation 16s infinite linear; width: 100%; } /* 滚动动画 */ @keyframes myAnimation { from { transform: translate(0px, 0%); } to { transform: translate(0px, -100%); } } </style>预览 640.gif图片 案例 可直接复制代码到uni-app项目中预览，或者手动修改for循环也可以在原生小程序中预览 <template> <view> <view class="title">中奖名单</view> <!-- 列表 --> <view class="swier"> <view class="swier-gun"> <view class="user-view" v-for="(item, index) in usernames" :key="index"> <view class="user-img"> <img class="all-img" src=""> </view> <view> <view class="user-name"> {{index}}-{{item}} <tex class="user-suo">抽到多多券...</tex> </view> <view class="user-suo user-time"> {{timeDatas[index]}} </view> </view> </view> </view> <!-- 重复人员名称实现无缝滚动 --> <view class="swier-gun"> <view class="user-view" v-for="(item, index) in usernames" :key="index"> <view class="user-img"> <img class="all-img" src=""> </view> <view> <view class="user-name"> {{index}}-{{item}} <tex class="user-suo">抽到多多券...</tex> </view> <view class="user-suo user-time"> {{timeDatas[index]}} </view> </view> </view> </view> </view> </view> </template> <script> export default { data() { return { usernames: [], timeDatas: [], }; }, onLoad() { // 用户名称 40是数量 this.generateNames(40); // 生产不大于现在的时间 this.generTiem(); }, methods: { // 用户名生成 getRandomChar() { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz天地玄黄宇宙洪日月盈昃辰宿列寒来暑往秋收冬闰余成岁律吕调云腾致雨露结霜金生丽水玉出昆剑号巨阙珠称光果珍李柰菜重芥海咸河淡鳞潜羽龙师火帝鸟官人始制文字乃服衣推位让国有虞陶吊民伐罪周发殷坐朝问1234567890'; return chars.charAt(Math.floor(Math.random() * chars.length)); }, getRandomName() { const length = Math.floor(Math.random() * 10) + 5; // 名字长度在5到14之间 const halfLength = Math.floor(length / 2); let name = ''; // 生成前半部分 for (let i = 0; i < halfLength; i++) { name += this.getRandomChar(); } // 添加4个星号 name += '****'; // 生成后半部分 for (let i = 0; i < length - halfLength - 4; i++) { name += this.getRandomChar(); } return name; }, generateNames(count) { for (let i = 0; i < count; i++) { this.usernames.push(this.getRandomName()); } }, generTiem() { // 获取当前日期和时间 function getCurrentDateTime() { const now = new Date(); return now; } // 生成随机时间段（返回Date对象，不晚于当前时间） function getRandomTimeIntervalForTodayUpToNow() { const now = new Date(); const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // 当天的开始时间 // 生成从startOfDay到now之间的随机时间戳 const randomTimestamp = startOfDay.getTime() + Math.random() * (now - startOfDay); return new Date(randomTimestamp); } // 生成40个随机时间段并按时间从大到小排序 function generateAndSortRandomDateTimes(num) { const dateTimes = []; for (let i = 0; i < num; i++) { const randomDateTime = getRandomTimeIntervalForTodayUpToNow(); dateTimes.push(randomDateTime); } // 按时间从大到小排序 dateTimes.sort((a, b) => b - a); // 格式化输出为 YYYY-MM-DD HH:MM:SS return dateTimes.map(date => date.toISOString().slice(0, 19).replace('T', ' ')); } const currentDateTime = getCurrentDateTime(); const randomDateTimes = generateAndSortRandomDateTimes(40); this.timeDatas = randomDateTimes; } }, }; </script> <style> /* 状态栏 */ .nut-navbar { background-color: #ffffff !important; } /* 顶部图片 */ .win-box-img { height: 600rpx; border-radius: 40rpx; overflow: hidden; margin: 30rpx; box-shadow: 2rpx 0 20rpx rgba(0, 0, 0, 0.5); } /* 标题 */ .title { margin: 60rpx 30rpx 30rpx 30rpx; font-size: 40rpx; font-weight: bold; } .swier { height: 800rpx; overflow: hidden; } .swier-gun { animation: myAnimation 16s infinite linear; width: 100%; } @keyframes myAnimation { from { transform: translate(0px, 0%); } to { transform: translate(0px, -100%); } } .user-view { display: flex; margin: 30rpx; } .user-img { width: 80rpx; height: 80rpx; border-radius: 200rpx; flex-shrink: 0; margin-right: 30rpx; background-color: red; } .user-suo { color: #777E90; margin: 0 10rpx; } .user-name { font-size: 28rpx; } .user-time { font-size: 24rpx; } </style>转载自枫瑞博客网
-
简单的html代码做一个数码管钟（可复制源代码） 效果展示 640.gif图片 源码分享 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数码管钟</title> <style> @import url('https://fonts.cdnfonts.com/css/lcd');*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;margin:0;background:linear-gradient(#040909 60vh,#312c2a 80vh);font-family:'LCD',sans-serif;font-family:'LCD2',sans-serif;font-family:'LCDMono2',sans-serif;font-family:'LCDMono',sans-serif;font-family:'Digitalism',sans-serif;--_refl:#f3eeef;--_bloom:#fcfbf9;--_y1:#fae8a5;--_y2:#fbd608;--_o1:#ff8f0c;--_o2:#e74702;--_o3:#b32801;--mw1:#d0d5d7;--m1:#fdea09;--m2:#e46703;--m3:#ac2a04}#noise-svg{height:100%;width:100%;opacity:0.12;position:absolute;z-index:100;pointer-events:none}#noise-rect{width:100vw;height:100vh}.clock{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:calc(var(--_size) * 0.01);--_factor:min(600px,80vh);--_size:min(var(--_factor),80vw)}.shadow{position:absolute;bottom:0;top:0;margin:auto;width:100%;height:0em;translate:0 45em;box-shadow:0 0 3em 2em #040909,0 0 8em 3em var(--_o3),0 0 10em 4em var(--_o2),0 0 10em 5em var(--_o1);opacity:0.6}.shadow::before{content:'';display:block;position:absolute;left:0;right:0;margin:auto;height:20em;width:0;box-shadow:0 0 8em 4em var(--_y1),0 0 8em 6em var(--_y2),0 0 8em 8em var(--_o1),0 0 8em 10em var(--_o2),0 0 8em 12em var(--_o3)}.shadow::after{content:'';display:block;position:absolute;z-index:-1;opacity:0.5;left:0;right:0;margin:auto;border-radius:50%;height:10em;width:10em;border:2px solid red;transform:rotateX(70deg);box-shadow:0 0em 12em 40em var(--_o1),0 0em 12em 60em var(--_o2),0 0em 12em 80em var(--_o3)}.clock.off .shadow{box-shadow:0 0 4em 3em #040909,0 0 8em 3em var(--_o3),0 0 10em 4em var(--_o2),0 0 10em 5em var(--_o1);opacity:0}.outer-pipe{position:absolute;z-index:2;width:calc(var(--_size) * (8/15));height:var(--_size);border-radius:20% / 10%;overflow:hidden;opacity:1;--_clip-btm:85.8%;clip-path:polygon(0 0,100% 0,100% var(--_clip-btm),0 var(--_clip-btm))}.inner-pipe{width:100%;height:100%;scale:0.84 0.91;border-radius:15% / 7%;box-shadow:0em 104em 16em 20em #040909,0em 1.2em 1em 0.2em var(--m3),0em 1.2em 1em 0.5em var(--m2),0em 1.2em 0.5em 1.2em var(--m1),0em 1.2em 1.2em 1.5em var(--m2),0em 1.2em 2em 2em var(--m3),0em 90em 16em 20em #040909,-1em 1em 2em 3.7em #040909,0.5em 0em 2em 3.7em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 0.5em 5em var(--mw1),0em 0em 0em 20em #040909}.pipe-accents{width:calc(var(--_size) * (8/15));height:var(--_size);position:absolute}.pipe-accents .top-tube,.pipe-accents .top,.pipe-accents .topinset,.pipe-accents .left,.pipe-accents .right{z-index:3}.pipe-accents .top-tube{position:absolute;top:3%;left:0;right:0;margin:auto;width:16%;height:6%;background:#040909;background:linear-gradient(120deg,rgba(60,62,62,1) 0%,rgba(4,9,0,1) 60%);box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3);border-radius:20%}.pipe-accents .tube-holders{position:absolute;width:26em;height:70em;translate:0 -7em;margin:auto;left:0;right:0;top:0;bottom:0;z-index:2}.pipe-accents .tube-holders div{position:absolute;width:3em;height:3em;border-radius:50%;--_metal-1:#30241d;--_metal-2:#000000;--_metal-3:#5f5f5f;--_vl:-8%;background:conic-gradient(from 0deg at 50% 50%,var(--_metal-1) 0%,var(--_metal-2) 7%,var(--_metal-1) 21%,var(--_metal-2) 35%,var(--_metal-2) 42%,var(--_metal-3) 56%,var(--_metal-1) 63%,var(--_metal-1) 70%,var(--_metal-2) 77%,var(--_metal-3) 84%,var(--_metal-2) 91%,var(--_metal-1) 100%);box-shadow:inset 0 0 0.1em 0.1em #ffffff5d,inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3)}.pipe-accents .tube-holders div:nth-child(1){top:12%;left:var(--_vl);rotate:-65deg}.pipe-accents .tube-holders div:nth-child(2){top:12%;right:var(--_vl);rotate:65deg}.pipe-accents .tube-holders div:nth-child(3){top:26%;left:var(--_vl);rotate:-85deg}.pipe-accents .tube-holders div:nth-child(4){top:26%;right:var(--_vl);rotate:85deg}.pipe-accents .tube-holders div:nth-child(5){top:78.5%;left:var(--_vl);rotate:-115deg}.pipe-accents .tube-holders div:nth-child(6){top:78.5%;right:var(--_vl);rotate:115deg}.pipe-accents .top{position:absolute;top:-0.7%;left:0;right:0;margin:auto;width:22%;height:6%;background:#040909;background:linear-gradient(120deg,rgba(60,62,62,1) 0%,rgba(4,9,0,1) 60%);box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3);border-radius:20%}.pipe-accents .topinset{position:absolute;top:-1.7%;left:0;right:0;margin:auto;width:14%;height:8%;background:#040909;background:linear-gradient(120deg,rgba(60,62,62,1) 0%,rgba(4,9,0,1) 60%);box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em var(--m1),inset 0em -1.2em 1em -0.8em var(--m2),inset 0em -1.2em 1em -0.2em var(--m3);border-radius:50%}.pipe-accents .topinset::before{content:'';display:block;width:50%;height:50%;border-radius:50%;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;box-shadow:inset 0 0 0em 0.1em #040909,0 0 0.5em 0.1em var(--_bloom),inset 0 0 1.3em 0.2em var(--_o3),inset 0 0 1.3em 0.4em var(--_o2),inset 0 0 1.3em 0.6em var(--_o1),inset 0 0 1.3em 2em var(--_y1);animation:5s flicker linear infinite}@keyframes flicker{0%{opacity:1}10%{opacity:1}11%{opacity:0.8}12%{opacity:1}65%{opacity:1}66%{opacity:0.7}67%{opacity:0.9}68%{opacity:1}69%{opacity:0.4}70%{opacity:1}100%{top:1}}.pipe-accents .left,.pipe-accents .right{width:100%;height:100%;position:absolute}.pipe-accents .left div,.pipe-accents .right div{--_pipe-pos-x:-3%;position:absolute;margin:auto;width:14%;height:2.4%;border-radius:0.7em;background:#040909}.pipe-accents .left div:nth-child(1){top:16%;left:var(--_pipe-pos-x);border-top-right-radius:50%;border-top-left-radius:50%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em -0.5em 0.8em -0.8em var(--m3),inset -1em -0.5em 0.9em -0.5em var(--m2),inset -1em -0.5em 1em -0.3em var(--m1)}.pipe-accents .left div:nth-child(1)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;left:78%;top:40%;rotate:5deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset 1em -0.5em 0.3em -0.5em var(--m3),inset 1em -0.5em 0.4em -0.3em var(--m2),inset 1em -0.5em 0.6em -0.2em var(--m1)}.pipe-accents .left div:nth-child(2){top:26%;left:var(--_pipe-pos-x);border-top-right-radius:30%;border-top-left-radius:30%;border-bottom-right-radius:30%;border-bottom-left-radius:30%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0em 0.8em -0.6em var(--m3),inset -1em 0em 0.9em 0em var(--m2),inset -1em 0em 1em 0.1em var(--m1)}.pipe-accents .left div:nth-child(2)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;left:78%;top:0%;rotate:2deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset 1em -0.1em 0.3em 0em var(--m3),inset 1em -0.1em 0.4em 0.2em var(--m2),inset 1em -0.1em 0.6em -0.3em var(--m1)}.pipe-accents .left div:nth-child(3){top:64%;left:var(--_pipe-pos-x);border-bottom-right-radius:40%;border-bottom-left-radius:40%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0.3em 0.8em -0.5em var(--m3),inset -1em 0.3em 0.9em -0.3em var(--m2),inset -1em 0.3em 1em 0em var(--m1)}.pipe-accents .left div:nth-child(3)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;left:78%;top:20%;rotate:-4deg;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset 1em 0.2em 0.3em -0.1em var(--m3),inset 1em 0.2em 0.4em 0em var(--m2),inset 1em 0.2em 0.6em 0.1em var(--m1)}.pipe-accents .right div:nth-child(1){top:16%;right:var(--_pipe-pos-x);border-top-right-radius:50%;border-top-left-radius:50%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em -0.5em 0.8em -0.8em var(--m3),inset 1em -0.5em 0.9em -0.5em var(--m2),inset 1em -0.5em 1em -0.3em var(--m1)}.pipe-accents .right div:nth-child(1)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;right:78%;top:40%;rotate:-5deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset -1em -0.5em 0.3em -0.5em var(--m3),inset -1em -0.5em 0.4em -0.3em var(--m2),inset -1em -0.5em 0.6em -0.2em var(--m1)}.pipe-accents .right div:nth-child(2){top:26%;right:var(--_pipe-pos-x);border-top-right-radius:30%;border-top-left-radius:30%;border-bottom-right-radius:30%;border-bottom-left-radius:30%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0em 0.8em -0.6em var(--m3),inset 1em 0em 0.9em 0em var(--m2),inset 1em 0em 1em 0.1em var(--m1)}.pipe-accents .right div:nth-child(2)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;right:78%;top:0%;rotate:-2deg;bottom:0;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset -1em -0.1em 0.3em 0em var(--m3),inset -1em -0.1em 0.4em 0.2em var(--m2),inset -1em -0.1em 0.6em -0.3em var(--m1)}.pipe-accents .right div:nth-child(3){top:64%;right:var(--_pipe-pos-x);border-bottom-right-radius:40%;border-bottom-left-radius:40%;box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0.3em 0.8em -0.5em var(--m3),inset 1em 0.3em 0.9em -0.3em var(--m2),inset 1em 0.3em 1em 0em var(--m1)}.pipe-accents .right div:nth-child(3)::before{content:'';display:block;width:98%;height:1em;background:#040909;position:absolute;right:78%;top:20%;rotate:4deg;margin:auto;z-index:-1;box-shadow:inset 0em 0.3em 0.6em -0.4em var(--mw1),inset -1em 0.2em 0.3em -0.1em var(--m3),inset -1em 0.2em 0.4em 0em var(--m2),inset -1em 0.2em 0.6em 0.1em var(--m1)}.pipe-accents .bottom-left{position:absolute;bottom:12%;left:-6%;width:20%;height:2.4%;background:#040909;border-radius:40%;border-top-left-radius:50%;border-top-right-radius:50%;box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset -2em 0em 1.8em -1.5em var(--m3),inset -2em 0em 1.9em -1.3em var(--m2),inset -2em 0em 2em -1em var(--m1)}.pipe-accents .bottom-left::before{display:block;content:'';position:absolute;top:-24%;left:0;right:0;margin:auto;background:#040909;width:90%;height:70%;border-radius:50%;border-top-left-radius:40%;border-top-right-radius:40%;box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset -2em 0em 1.8em -1.5em var(--m3),inset -2em 0em 1.9em -1.3em var(--m2),inset -2em 0em 2em -1em var(--m1)}.pipe-accents .bottom-right{position:absolute;bottom:12%;right:-6%;width:20%;height:2.4%;background:#040909;border-radius:40%;border-top-left-radius:50%;border-top-right-radius:50%;box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset 2em 0em 1.8em -1.5em var(--m3),inset 2em 0em 1.9em -1.3em var(--m2),inset 2em 0em 2em -1em var(--m1)}.pipe-accents .bottom-right::before{display:block;content:'';position:absolute;top:-24%;left:0;right:0;margin:auto;background:#040909;width:90%;height:70%;border-radius:50%;border-top-left-radius:40%;border-top-right-radius:40%;box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset 2em 0em 1.8em -1.5em var(--m3),inset 2em 0em 1.9em -1.3em var(--m2),inset 2em 0em 2em -1em var(--m1)}.small-outer-pipe{position:absolute;translate:0 -5.6%;width:calc(var(--_size) * (1/2.7));height:calc(var(--_size) * 0.87);border-radius:40% / 10%;overflow:hidden;opacity:1;--_clip-btm:96%;clip-path:polygon(0 0,100% 0,100% var(--_clip-btm),0 var(--_clip-btm));border-top:0.3em solid var(--mw1)}.small-inner-pipe{width:100%;height:100%;scale:0.92 0.98;border-radius:35% / 10%;box-shadow:0em -94em 20em 20em #040909,0em 104em 20em 20em #040909,0em 1em 1em 0.2em var(--m3),0em 1em 1em 0.5em var(--m2),0em 1em 0.5em 1.2em var(--m1),0em 1em 1.2em 1.5em var(--m2),0em 1em 2em 2em var(--m3),-0.2em 0.5em 0.8em -0.2em var(--mw1),0em 90em 16em 20em #040909,-1em 1em 2em 2em #040909,0.5em 0em 2em 2em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 1.5em 5em var(--mw1),0em 0em 0em 20em #040909}.base-container{position:absolute;width:calc(var(--_size) * (8/15));height:var(--_size)}.base-container .base{width:100%;height:100%;position:absolute}.base-container .base div{background:#040909;position:absolute;bottom:4%;left:-10%;width:120%;height:12%;border-radius:40% 40% / 30% 30%;box-shadow:0 2em 2em -1.4em #000,inset -0.4em 0.1em 0.8em -0.2em var(--mw1)}.base-container .base div::before{content:"";display:block;width:100%;height:50%;border-radius:100%;box-shadow:0 2em 10em 0 #000,inset -0.4em 0em 0.8em 0em var(--mw1),inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 1em 0em #040909,inset 0em 0em 2em 0em #040909,inset 0em 0em 3em 0em #040909,inset 0em 0em 1em 0em var(--m3),inset 0em 0em 1em 2em var(--m2),inset 1em 0.3em 10em 10em var(--m1)}.display{color:var(--_bloom);font-size:14em;line-height:0.8em;translate:0 -0.4em}.display .row{display:flex}.display .small-row{font-size:0.3em;position:absolute;right:-22%;top:10%}.display .small-row .row{flex-direction:column;line-height:1.02em}.display .row .col{display:flex;position:relative}.display .row .col>div:nth-child(1){opacity:0.2}.display .row .col>div:nth-child(2){position:absolute;right:0;z-index:2}.display .row .col>div:nth-child(3){position:absolute;right:0;color:var(--_bloom);--_o1-size:0.1em;--_o2-size:0.4em;--_o3-size:0.6em;text-shadow:0em 0em 0.04em var(--_bloom),0em 0em 0.04em var(--_bloom),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o3-size) var(--_o3),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o2-size) var(--_o2),0em 0em var(--_o1-size) var(--_o1),0em 0em var(--_o1-size) var(--_o1),0em 0em var(--_o1-size) var(--_o1),0em 0em var(--_o1-size) var(--_o1)}.glass-tube{position:absolute;width:26em;height:70em;translate:0 -7em;border-radius:1000px;box-shadow:0em 0em 1em -0.2em var(--m1),0em 0em 2em -0.4em var(--m2),0em 0em 3em -0.4em var(--m2),inset 0em 0em 0.4em 0.2em var(--m3),inset 0em 0em 0.6em 0.4em var(--m2),inset 0em 0em 1em 0.7em var(--m1),inset 0em 0em 3em 0em var(--m2),inset 0em 0em 5em 1em var(--m3),inset -0.1em 0.1em 0.1em 0em var(--mw1),inset 0 0 1em 0.1em var(--mw1)}.glass-tube::before{content:"";display:block;width:6%;opacity:0.9;height:60%;box-shadow:inset 1.5em 0em 1em -1em var(--mw1);position:absolute;left:4%;top:16%;filter:blur(0.6px);opacity:0.8;border-radius:50% 1% / 50% 100%}.glass-tube::after{content:"";display:block;width:30%;opacity:0.9;height:60%;box-shadow:inset -1em 0.5em 1em -1em var(--mw1);position:absolute;right:4%;top:4%;filter:blur(0.6px);opacity:1;border-radius:0% 100% / 10% 30%}.hex{position:absolute;width:17.7em;height:70em;translate:0 -7em;border-radius:1000px;overflow:hidden;z-index:-1;opacity:0.7;--_hex-cl1:#040909;--_hex-cl2:var(--_o1);--_hex-size:2.18em;background:radial-gradient(circle farthest-side at 0% 50%,var(--_hex-cl1) 23.5%,rgba(240,166,17,0) 0) calc(1.06*var(--_hex-size)) calc(1.5*var(--_hex-size)),radial-gradient(circle farthest-side at 0% 50%,var(--_hex-cl2) 24%,rgba(240,166,17,0) 0) calc(0.94*var(--_hex-size)) calc(1.5*var(--_hex-size)),linear-gradient(var(--_hex-cl1) 14%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 85%,var(--_hex-cl1) 0)0 0,linear-gradient(150deg,var(--_hex-cl1) 24%,var(--_hex-cl2) 0,var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,var(--_hex-cl2) 0,var(--_hex-cl2) 76%,var(--_hex-cl1) 0)0 0,linear-gradient(30deg,var(--_hex-cl1) 24%,var(--_hex-cl2) 0,var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,var(--_hex-cl2) 0,var(--_hex-cl2) 76%,var(--_hex-cl1) 0)0 0,linear-gradient(90deg,var(--_hex-cl2) 2%,var(--_hex-cl1) 0,var(--_hex-cl1) 98%,var(--_hex-cl2) 0%)0 0 var(--_hex-cl1);background-size:calc(2*var(--_hex-size)) calc(3*var(--_hex-size))}.hex .overlay{position:absolute;background:#fff;mix-blend-mode:overlay;width:200%;left:-40%;height:12%;rotate:40deg;animation:5s electric ease-in infinite}@keyframes electric{0%{top:700%}100%{top:-20%}}.tube-base-container{position:absolute;width:34em;height:30em;translate:0 24em}.tube-base{position:absolute;bottom:4%;width:60%;height:20%;background:#040909;left:0;right:0;margin:auto;border-radius:80% / 40%;box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 3em 2.8em -2.5em var(--m3),inset 0em 3em 3.9em -2.3em var(--m2),inset 0em 3em 4em -2em var(--m1)}.tube-base::before{display:block;content:'';width:99%;height:42%;background:#040909;border-radius:50%;box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 0em 1.8em -0.5em var(--m3),inset 0em 0em 1.9em -0.3em var(--m2),inset 0em 0em 2em -0em var(--m1)}.tube-btm{width:40%;height:10%;position:absolute;left:0;right:0;margin:auto;bottom:34%;background-color:#040909;border-radius:20% 20% 100% 100%;box-shadow:inset 0em 0em 1.2em -0.2em var(--mw1),inset 0em 0.3em 1.2em 0em var(--m1),inset 0em 0.3em 1.2em 0.3em var(--m2),inset 0em 0.3em 1.2em 0.6em var(--m3)}.tube-btm::before{content:'';display:block;width:60%;height:40%;position:absolute;left:0;right:0;margin:auto;bottom:-158%;border-radius:30% 30% 100% 100%;background-color:#040909;box-shadow:inset 0em -0.1em 0.7em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em var(--m1),inset 0em 0.1em 1em -0.3em var(--m2),inset 0em 0.1em 1em -0em var(--m3)}.rods{width:50%;height:28%;position:absolute;left:0;right:0;margin:auto;bottom:14%;--_clip-btm:80%;clip-path:polygon(0 0,100% 0,100% var(--_clip-btm),0 var(--_clip-btm))}.rods .left-rod{width:60%;height:12%;rotate:60deg;position:absolute;bottom:40%;left:0;background:#040909}.rods .center-rod{width:30%;height:12%;rotate:90deg;position:absolute;bottom:40%;right:0;left:0;margin:auto;background:#040909}.rods .right-rod{width:60%;height:12%;rotate:-60deg;position:absolute;bottom:40%;right:0;background:#040909}.rods .left-rod,.rods .center-rod,.rods .right-rod{box-shadow:inset 0em 0.1em 0.8em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em var(--m1),inset 0em 0.1em 1em -0.3em var(--m2),inset 0em 0.1em 1em -0em var(--m3)}.wires{width:100%;height:100%;z-index:-1}.wires div:nth-child(1),.wires div:nth-child(2){width:18%;height:18%;rotate:25deg;translate:14em -5em;position:absolute;bottom:0;box-shadow:inset 0em 0.1em 0.4em 0em var(--mw1),inset 0 0 0 0.5em #040909;border-radius:0% 100% / 50% 100%}.wires div:nth-child(2){translate:15em -8em;rotate:122deg;scale:0.7}.button{position:absolute;width:4em;height:4em;border-radius:50%;translate:0 0em;left:0;right:0;margin:auto;top:0;bottom:0;translate:0 43em;z-index:100;cursor:pointer;background:var(--_bloom);box-shadow:0em -0.1em 0.2em 0em var(--_o1),0em -0.1em 0.2em 0.1em var(--_o2),0em -0.1em 0.2em 0.2em var(--_o3),0em -0.1em 1em 0.5em var(--_bloom),inset 0em 0em 1em 0em var(--_o3),inset 0em 0em 1em 0.5em var(--_o2),inset 0em 0em 1em 1em var(--_o1);filter:blur(1px)}.power-cord{z-index:-1;scale:1.4 0.9;position:absolute;width:100%;height:50em;top:0;bottom:0;margin:auto;translate:-36em 44em;transform:rotateX(55deg) rotateZ(-64deg)}.power-cord div:nth-child(1){width:20em;height:18em;box-shadow:0.3em 0.3em 0.2em 0.1em rgba(255,255,255,0.2);border-bottom:6px solid #040909;border-right:4px solid #040909;position:absolute;left:0;right:0;translate:39.3em 0em;margin:auto;bottom:4%;border-radius:100% 30% / 100% 0}.power-cord div:nth-child(2){width:20em;height:12em;box-shadow:inset 0.3em 0.1em 0.2em -0.1em rgba(255,255,255,0.2);border-top:3px solid #04090977;border-left:4px solid #040909;position:absolute;translate:58em 0.2em;left:0;right:0;margin:auto;bottom:40%;border-radius:100% 30% / 100% 0}*,*:before,*:after{transition:box-shadow 0.2s ease-in-out,opacity 0.2s ease-in-out;user-select:none}.clock.off .hex{opacity:0.3;filter:grayscale(1)}.clock.off .hex .overlay{display:none}.clock.off .pipe-accents .top-tube,.clock.off .pipe-accents .top,.clock.off .pipe-accents .topinset{box-shadow:inset -0.2em 1.1em 1.4em -0.4em var(--mw1),inset 0em -1.2em 0.5em -1.1em rgba(0,0,0,0),inset 0em -1.2em 1em -0.8em rgba(0,0,0,0),inset 0em -1.2em 1em -0.2em rgba(0,0,0,0)}.clock.off .pipe-accents .topinset::before{box-shadow:inset 0 0 0em 0.1em #040909,-0.1em 0.2em 0.7em 0.1em rgba(255,255,255,0.4),inset 0 0 1.3em 0.2em rgba(0,0,0,0),inset 0 0 1.3em 0.4em rgba(0,0,0,0),inset 0 0 1.3em 0.6em rgba(0,0,0,0),inset 0 0 1.3em 2em rgba(0,0,0,0);animation-play-state:paused}.clock.off .pipe-accents .tube-holders div{box-shadow:inset 0 0 0.1em 0.1em #ffffff5d,inset 0em -1.2em 0.5em -1.1em rgba(0,0,0,0),inset 0em -1.2em 1em -0.8em rgba(0,0,0,0),inset 0em -1.2em 1em -0.2em rgba(0,0,0,0)}.clock.off .inner-pipe{box-shadow:0em 104em 16em 20em #040909,0em 1.2em 1em 0.2em rgba(0,0,0,0),0em 1.2em 1em 0.5em rgba(0,0,0,0),0em 1.2em 0.5em 1.2em rgba(0,0,0,0),0em 1.2em 1.2em 1.5em rgba(0,0,0,0),0em 1.2em 2em 2em rgba(0,0,0,0),0em 90em 16em 20em #040909,-1em 1em 2em 3.7em #040909,0.5em 0em 2em 3.7em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 0.5em 5em var(--mw1),0em 0em 0em 20em #040909}.clock.off .small-inner-pipe{width:100%;height:100%;scale:0.92 0.98;border-radius:35% / 10%;box-shadow:0em -94em 20em 20em #040909,0em 104em 20em 20em #040909,0em 1em 1em 0.2em rgba(0,0,0,0),0em 1em 1em 0.5em rgba(0,0,0,0),0em 1em 0.5em 1.2em rgba(0,0,0,0),0em 1em 1.2em 1.5em rgba(0,0,0,0),0em 1em 2em 2em rgba(0,0,0,0),-0.2em 0.5em 0.8em -0.2em var(--mw1),0em 90em 16em 20em #040909,-1em 1em 2em 2em #040909,0.5em 0em 2em 2em #040909,0em 0em 0em 4.6em var(--mw1),0em 0em 1.5em 5em var(--mw1),0em 0em 0em 20em #040909}.clock.off .pipe-accents .bottom-left{box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset -3em 0em 1.8em -1.5em rgba(0,0,0,0),inset -3em 0em 1.9em -1.3em rgba(0,0,0,0),inset -3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .bottom-left::before{box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset -3em 0em 1.8em -1.5em rgba(0,0,0,0),inset -3em 0em 1.9em -1.3em rgba(0,0,0,0),inset -3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .bottom-right{box-shadow:inset -0.4em -0.1em 1em -0.4em var(--mw1),inset 3em 0em 1.8em -1.5em rgba(0,0,0,0),inset 3em 0em 1.9em -1.3em rgba(0,0,0,0),inset 3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .bottom-right::before{box-shadow:inset -0.4em 0em 1em -0.3em var(--mw1),inset 3em 0em 1.8em -1.5em rgba(0,0,0,0),inset 3em 0em 1.9em -1.3em rgba(0,0,0,0),inset 3em 0em 2em -1em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(1){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em -0.5em 0.8em -0.8em rgba(0,0,0,0),inset -1em -0.5em 0.9em -0.5em rgba(0,0,0,0),inset -1em -0.5em 1em -0.3em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(1)::before,.clock.off .pipe-accents .left div:nth-child(2)::before,.clock.off .pipe-accents .left div:nth-child(3)::before,.clock.off .pipe-accents .right div:nth-child(1)::before,.clock.off .pipe-accents .right div:nth-child(2)::before,.clock.off .pipe-accents .right div:nth-child(3)::before{box-shadow:inset 0em 0.3em 0.6em -0.3em var(--mw1),inset 1em -0.5em 0.3em -0.5em rgba(0,0,0,0),inset 1em -0.5em 0.4em -0.3em rgba(0,0,0,0),inset 1em -0.5em 0.6em -0.2em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(2){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0em 0.8em -0.6em rgba(0,0,0,0),inset -1em 0em 0.9em 0em rgba(0,0,0,0),inset -1em 0em 1em 0.1em rgba(0,0,0,0)}.clock.off .pipe-accents .left div:nth-child(3){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset -1em 0.3em 0.8em -0.5em rgba(0,0,0,0),inset -1em 0.3em 0.9em -0.3em rgba(0,0,0,0),inset -1em 0.3em 1em 0em rgba(0,0,0,0)}.clock.off .pipe-accents .right div:nth-child(1){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em -0.5em 0.8em -0.8em rgba(0,0,0,0),inset 1em -0.5em 0.9em -0.5em rgba(0,0,0,0),inset 1em -0.5em 1em -0.3em rgba(0,0,0,0)}.clock.off .pipe-accents .right div:nth-child(2){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0em 0.8em -0.6em rgba(0,0,0,0),inset 1em 0em 0.9em 0em rgba(0,0,0,0),inset 1em 0em 1em 0.1em rgba(0,0,0,0)}.clock.off .pipe-accents .right div:nth-child(3){box-shadow:inset -0.1em 0.4em 0.6em -0.2em var(--mw1),inset 1em 0.3em 0.8em -0.5em rgba(0,0,0,0),inset 1em 0.3em 0.9em -0.3em rgba(0,0,0,0),inset 1em 0.3em 1em 0em rgba(0,0,0,0)}.clock.off .base-container .base div::before{box-shadow:0 2em 10em 0 #000,inset -0.4em 0em 0.8em 0em var(--mw1),inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 0.5em 0.3em #040909,inset 0em 0em 1em 0em #040909,inset 0em 0em 2em 0em #040909,inset 0em 0em 3em 0em #040909,inset 0em 0em 1em 0em rgba(0,0,0,0),inset 0em 0em 1em 2em rgba(0,0,0,0),inset 1em 0.3em 10em 10em rgba(0,0,0,0)}.clock.off .display .row .col>div:nth-child(2){opacity:0}.clock.off .display .row .col>div:nth-child(3){opacity:0}.clock.off .glass-tube{box-shadow:0em 0em 1em -0.2em rgba(0,0,0,0),0em 0em 2em -0.4em rgba(0,0,0,0),0em 0em 3em -0.4em rgba(0,0,0,0),inset 0em 0em 0.4em 0.2em rgba(0,0,0,0),inset 0em 0em 0.6em 0.4em rgba(0,0,0,0),inset 0em 0em 1em 0.7em rgba(0,0,0,0),inset 0em 0em 3em 0em rgba(0,0,0,0),inset 0em 0em 5em 1em rgba(0,0,0,0),inset -0.1em 0.1em 0.1em 0em var(--mw1),inset 0 0 1em 0.1em var(--mw1)}.clock.off .tube-base{box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 3em 2.8em -2.5em rgba(0,0,0,0),inset 0em 3em 3.9em -2.3em rgba(0,0,0,0),inset 0em 3em 4em -2em rgba(0,0,0,0)}.clock.off .tube-base::before{box-shadow:inset 0em -0.1em 1.2em -0.4em var(--mw1),inset 0em 0em 1.8em -0.5em rgba(0,0,0,0),inset 0em 0em 1.9em -0.3em rgba(0,0,0,0),inset 0em 0em 2em -0em rgba(0,0,0,0)}.clock.off .tube-btm{box-shadow:inset 0em 0em 1.2em -0.2em var(--mw1),inset 0em 0.3em 1.2em 0em rgba(0,0,0,0),inset 0em 0.3em 1.2em 0.3em rgba(0,0,0,0),inset 0em 0.3em 1.2em 0.6em rgba(0,0,0,0)}.clock.off .tube-btm::before{box-shadow:inset 0em -0.1em 0.7em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em rgba(0,0,0,0),inset 0em 0.1em 1em -0.3em rgba(0,0,0,0),inset 0em 0.1em 1em -0em rgba(0,0,0,0)}.clock.off .rods .left-rod,.clock.off .rods .center-rod,.clock.off .rods .right-rod{box-shadow:inset 0em 0.1em 0.8em -0.2em var(--mw1),inset 0em 0.1em 1em -0.7em rgba(0,0,0,0),inset 0em 0.1em 1em -0.3em rgba(0,0,0,0),inset 0em 0.1em 1em -0em rgba(0,0,0,0)}.clock.off .wires div:nth-child(1),.clock.off .wires div:nth-child(2){box-shadow:inset 0em 0.1em 0.4em -0.1em var(--mw1),inset 0 0 0 0.5em #040909}.clock.off .button{background:#8d8d8d;box-shadow:0em -0.1em 0.2em 0em #040909,0em -0.1em 0.2em 0.1em #040909,0em 0em 1em 0.5em var(--_bloom),0em -0.1em 1em 0.5em #040909,inset 0em 0em 1em 0em var(--mw1),inset 0em 0em 1em 0.5em var(--mw1),inset 0em 0em 1em 1em var(--mw1);filter:blur(0.7px);animation:5s flicker linear infinite} </style> </head> <body> <svg id="noise-svg"> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch' /> </filter> <rect id="noise-rect" filter='url(#noiseFilter)' /> </svg> <div class="clock off"> <div class="shadow"></div> <div class="base-container"> <div class="base"> <div></div> </div> </div> <div class="small-outer-pipe"> <div class="small-inner-pipe"></div> </div> <div class="outer-pipe"> <div class="inner-pipe"></div> </div> <div class="pipe-accents"> <div class="top-tube"></div> <div class="tube-holders"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="top"></div> <div class="topinset"></div> <div class="left"> <div></div> <div></div> <div></div> </div> <div class="right"> <div></div> <div></div> <div></div> </div> <div class="bottom-left"></div> <div class="bottom-right"></div> </div> <div class="display"> <div class="row"> <div class="col"> <div>8</div> <div id="char01">0</div> <div id="char02">0</div> </div> <div class="col"> <div>8</div> <div id="char11">0</div> <div id="char12">0</div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char21">0</div> <div id="char22">0</div> </div> <div class="col"> <div>8</div> <div id="char31">0</div> <div id="char32">0</div> </div> </div> <div style="height: 0.2em;"></div> <div class="small-row"> <div class="row"> <div class="col"> <div>8</div> <div id="char41">0</div> <div id="char42">0</div> </div> <div class="col"> <div>8</div> <div id="char51">0</div> <div id="char52">0</div> </div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char61">0</div> <div id="char62">0</div> </div> <div class="col"> <div>8</div> <div id="char71">0</div> <div id="char72">0</div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char81">0</div> <div id="char82">0</div> </div> <div class="col"> <div>8</div> <div id="char91">0</div> <div id="char92">0</div> </div> </div> <div class="row"> <div class="col"> <div>8</div> <div id="char101">0</div> <div id="char102">0</div> </div> <div class="col"> <div>8</div> <div id="char111">0</div> <div id="char112">0</div> </div> </div> </div> <div class="glass-tube"></div> <div class="hex"> <div class="overlay"></div> </div> <div class="tube-base-container"> <div class="wires"> <div></div> <div></div> </div> <div class="tube-base"></div> <div class="rods"> <div class="left-rod"></div> <div class="center-rod"></div> <div class="right-rod"></div> </div> <div class="tube-btm"></div> </div> <div class="power-cord"> <div></div> <div></div> </div> <div class="button" onclick="body.querySelector('.clock').classList.toggle('off')"> <div></div> </div> </div> </body> <script> function updateTimeAndDate(){const now=new Date();let hours=now.getHours();const minutes=now.getMinutes().toString().padStart(2,'0');let amPm=hours>=12?'PM':'AM';if(hours>12){hours-=12}else if(hours===0){hours=12}let timeStr=hours.toString().padStart(2,'0')+minutes;if(timeStr.startsWith('0')){timeStr=' '+timeStr.slice(1)}let month=(now.getMonth()+1).toString().padStart(2,'0');let day=now.getDate().toString().padStart(2,'0');const year=now.getFullYear().toString().slice(-2);if(month.startsWith('0')){month=' '+month.slice(1)}if(day.startsWith('0')){day=' '+day.slice(1)}const displayStr=timeStr+amPm+month+day+year;for(let i=0;i<12;i++){document.getElementById('char'+i+'1').textContent=displayStr[i];document.getElementById('char'+i+'2').textContent=displayStr[i]}}updateTimeAndDate();setInterval(updateTimeAndDate,60000); </script> </html>
-
新手小白都能搭建的留言系统 今天给大家带来的教程是使用PHP和Bootstrap构建响应式布局，搭建一个简单的留言系统。 这个留言系统是早期博客给我的灵感，所以对于这个系统来说，并没有什么创新，但是对于新手小白来说可以借鉴一二。 图片 网页示例 上面这个网站是发布资源的一个网站，为了让人不登录就能发布留言，我首先设置了只带有昵称(nickname)、邮箱(email)、留言内容（message）的数据库： CREATE TABLE messages ( id INT AUTO_INCREMENT PRIMARY KEY, nickname VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL, message TEXT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );从上面不难看出，我也在留言数据上加了一个发布时间，这样方便排序和整理。 图片 留言列表 我们要获取数据的话，可以创建一个config.php文件用于保存数据库信息，具体操作可以看我之前的文章。然后后端调用这个config.php文件，如下： <?php // 引入数据库配置文件 include 'config.php'; // 检查是否是 POST 请求 if ($_SERVER["REQUEST_METHOD"] == "POST" && empty($_SESSION['form_submitted'])) { // 接收表单数据 $nickname = $conn->real_escape_string($_POST['nickname']); $email = $conn->real_escape_string($_POST['email']); $message = $conn->real_escape_string($_POST['message']); // 验证邮箱 if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo '<script>showError("email", "无效的邮箱地址！");</script>'; exit; } // 检查昵称是否为空 if (empty($_POST['nickname'])) { echo '<script>showError("nickname", "昵称不能为空！");</script>'; exit; } // 检查邮箱是否为空 if (empty($_POST['email'])) { echo '<script>showError("email", "邮箱不能为空！");</script>'; exit; } // 检查留言是否为空 if (empty($_POST['message'])) { echo '<script>showError("message", "留言内容不能为空！");</script>'; exit; } // 准备 SQL 语句并绑定参数 $sql = "INSERT INTO messages (nickname, email, message) VALUES (?, ?, ?)"; $stmt = $conn->prepare($sql); $stmt->bind_param("sss", $nickname, $email, $message); // 执行 SQL 语句 if ($stmt->execute()) { echo '<script>showSuccess("留言成功！");</script>'; } else { echo '<script>showError("server", "留言失败：" . ' . json_encode($conn->error) . ');</script>'; } $stmt->close(); } // 获取留言总数 $total_sql = "SELECT COUNT(*) AS total FROM messages"; $total_result = $conn->query($total_sql); $total_row = $total_result->fetch_assoc(); $total_messages = $total_row['total']; // 获取留言列表 $page = isset($_GET['page']) ? $_GET['page'] : 1; $limit = 5; // 每页显示10条留言 $start = ($page - 1) * $limit; $sql = "SELECT id, nickname, email, message, created_at FROM messages ORDER BY id DESC LIMIT $start, $limit"; $result = $conn->query($sql); ?>在这里我对留言为空的状态，都做了相应的提示，其实这里直接也可以在input组件上设置“required”属性就行了，我只是习惯这样去写。 然后为了跟主站保持统一，也是使用的bootstrap来布局。 图片 (代码详见：新手小白都能搭建的留言系统 ) 这里我设计了一个小技巧，只有管理员才能查看到留言人的邮箱。这里的登录是检测是否登录主站，大家用来测试的时候就不用加条件了。 <?php if (isset($_SESSION['username']) && $_SESSION['groupid'] <= 2) { ?> <small class="text-muted"><?php echo htmlspecialchars($row['email']); ?></small> <?php } ?>显示效果如下： 图片 登录网站会显示留言人邮箱 需要知道的是，留言多了之后，页面就会显得很长很杂，一般都是设置分页，保证页面整洁有规划。 <!-- 分页导航 --> <nav> <ul class="pagination justify-content-center mt-2"> <?php $sql = "SELECT COUNT(*) as count FROM messages"; $result = $conn->query($sql); $row = $result->fetch_assoc(); $total_pages = ceil($row['count'] / $limit); // 计算上一页和下一页的链接 $prev_page = $page - 1; $next_page = $page + 1; // 生成上一页链接 if ($prev_page > 0) { echo "<li class='page-item'><a class='page-link' href='?page=$prev_page'>上一页</a></li>"; } else { echo "<li class='page-item disabled'><a class='page-link' href='#' tabindex='-1' aria-disabled='true'>上一页</a></li>"; } // 生成页码链接 for ($i = 1; $i <= $total_pages; $i++) { $class = $i == $page ? "active" : ""; echo "<li class='page-item $class'><a class='page-link' href='?page=$i'>$i</a></li>"; } // 生成下一页链接 if ($next_page <= $total_pages) { echo "<li class='page-item'><a class='page-link' href='?page=$next_page'>下一页</a></li>"; } else { echo "<li class='page-item disabled'><a class='page-link' href='#' tabindex='-1' aria-disabled='true'>下一页</a></li>"; } ?> </ul> </nav>效果如下： 图片 留言列表的分页系统 其实这个小界面都是比较简单的，主要是看人前期怎么去设计，需要考虑人性化、合理化、个性化。
-
全自动申请、更新、续期 SSL 证书的开源平台 项目介绍 CertD 是一款极具创新性的工具，它专注于提供免费的全自动申请和自动部署更新 SSL 证书的服务。其命名风格巧妙地借鉴了 Linux 守护进程的命名方式，“CertD”中的“D”代表着证书守护进程（Certificate Daemon）的含义，这一命名不仅体现了其技术渊源，还暗示了它在后台默默守护证书安全的重要角色。 图片 它支持私有化部署，这意味着用户可以将证书和相关的授权信息等敏感数据存储在自己的私有环境中，极大地降低了数据泄露的风险。这种私有化部署的方式为用户的数据安全提供了强有力的保障，让用户能够放心地使用 SSL 证书来保护网站的安全。 特性亮点 1、全自动申请与部署更新：不仅支持证书申请过程自动化，还能自动化部署更新证书，确保证书永不过期。 2、广泛的域名支持：支持阿里云、腾讯云、华为云、Cloudflare等各种途径注册的域名，包括通配符域名和多个域名打到一个证书上的情况。 3、邮件通知：及时向用户发送相关通知，确保用户了解证书的状态。 4、私有化部署：高度重视数据安全，用户可进行私有化部署，保障证书和授权信息等敏感数据的安全。 5、免费：相较于阿里云单个通配符域名证书每年最低1800元的费用，CertD免费为用户提供服务。 图片 添加证书自动化 项目仓库 开源项目地址： https://github.com/certd/certd 详细的使用教程： https://github.com/certd/certd/blob/v2/step.md 体验地址： https://certd.handsfree.work 私有化部署教程 # 随便创建一个目录 mkdir certd # 进入目录 cd certd # 下载docker-compose.yaml文件，或者手动下载放到certd目录下 wget https://gitee.com/certd/certd/raw/v2/docker/run/docker-compose.yaml # 可以根据需要修改里面的配置 # 1.修改镜像版本号【可选】 # 2.配置数据保存路径【可选】 # 3.修改端口号【可选】 vi docker-compose.yaml # 【可选】 # 启动certd docker compose up -d默认账户密码：admin/123456 访问地址：http://your_server_ip:7001 转自：青檬小栈
-
如何打造高质量的公众号？ 打造高质量的公众号需要从多个方面进行考虑和实践。以下是根据搜索结果总结的几点关键步骤和注意事项。 1. 明确公众号的定位 公众号的定位要结合个人和企业的角度去出发进行定位，结合企业的产品，个人提供什么样的类型，什么样的内容。确定完成之后，还要再去分析目标用户的特征、公众号的风格，要做个人号还是企业号，公众号是服务号还是订阅号等等这一些都需要考虑。并且在名称上也要画出重点，清晰明了地让用户知道你这个公众号大概是干嘛的。 2. 提供高质量的内容 高质量的内容是吸引读者打开阅读的关键。内容的质量应该做到优秀，用户应该对他们的内容感到满意，以便获得更多的推荐。原创和创新是提高内容质量的关键，内容推荐就是基于这两点。特别是，原始内容非常重要，是获得推荐的关键因素。另一种是在创作中根据用户的需要进行创作，这样用户可以感到有用，内容可以突出其质量。 3. 注意文章的排版 文章的排版非常重要，好的排版甚至可以给用户更好的阅读体验，从而提高阅读数据。包括选择适合的字体大小，适当地在文字中插入图片，以及控制文章的颜色等。还可以使用一些排版工具来提高排版的效果。 4. 与读者进行互动 与读者进行互动可以增加他们的参与性，同时也可以帮助我们了解客户对具体内容的反馈。这可以通过回复评论、进行互动问答活动等方式完成。 5. 利用数据分析 利用统计分析工具能够帮助我们掌握读者的举动与兴趣，从而更好地调整我们的内容策略。这可以包含应用GoogleAnalytics等网站分析工具或公众号内置用户数据分析作用。 6. 注重品牌的建设和维护 公众号是一个展现企业形象的重要窗口。你需要在内容、设计风格、制作等层面打造一个与众不同品牌形象，便于让读者比较容易辨别出你的品牌。 总的来说，打造高质量的公众号需要有明确的定位，提供优质的内容，注意文章的排版，与读者进行互动，利用数据分析，并注重品牌的建设和维护。这是一个需要长期坚持和不断优化的过程，但只要坚持下去，就一定能看到明显的成果。 图片
-
为什么淘宝直播单场数据下滑？ 单场流量下降原因：平台会在每场直播开播后30分钟内进行公域推荐流量助力，帮助直播间流量快速启动，这30分钟的推荐流量承接效率，会决定你的直播间是否可以持续获得直播域推荐流量！内容指数或交易指数任一项达到基础效率门槛，就能顺利通过。若两项都很差，将可能大幅影响直播域公域推荐流量（广告、店铺及商详私域流量不受影响） 【探测指标】 1、内容指标：包括直播域用户停留时长等指标 2、交易指标：包括直播域流量商品点击次数和引导成交额等指标 图片 图片 【探测结果提醒】开播前30分钟内V1-V5主播在主播APP-开播页面/新版中控台-专业版数据大屏通知本场直播的探测是否通过的提醒（开播30分钟后探测结果提醒不会显示） 图片 图片 【探测失败场次曲线示例】 图片 【运营动作建议】 1、少无效准备，比如开播后调试设备、空镜、不挂品等 2、及时发布商品链接，进行爆品预告，告诉“算法”应该为你推荐哪类用户 3、面对新用户，积极互动，不要坐等用户评论提问哦
-
淘宝直播为什么新号开播没有流量？ 新主播首播激励流量礼包2024年2月2日正式上线！ 【参与对象】满足以下两种身份之一即可： 1、新主播：2024年2月1日后的新入驻主播 2、回归主播：入驻后开播过，最后一场开播至今为止超180天未开播的复播主播（2024.2.1前入驻后一直未开播的帐号无法参加） 【如何报名】符合以上条件的新主播、回归主播，将会自动获得新人首播激励相关权益，无需报名，获得相关权益的主播会在淘宝主播APP的首页弹窗收到通知，请主播们留意弹窗内容。新人首播激励的相关规则、条件、有效期也会在弹窗上展示 【激励周期】自触发新主播流量助力的次日起，持续14天；直播开始时间在有效期内每日7:00-23:59分，其余时间点开播不享受流量助力 【激励机制】前一开播自然日的直播数据表现（直播数据表现考核指标，包括但不限于成交金额、新增粉丝数、用户停留时长等关键指标。）决定次日的流量助力规模。所有考核指标仅统计自然日内的表现，若存在跨天直播，0点后的数据将计入次日，前一开播自然日数据表现越好，获得的流量助力越多，最高可获得2w流量助力，激励也可能是0 【激励权益】 新入驻主播：2024年2月1日后，凡淘宝直播新入驻的主播，首次连续开播超过30分钟后，自动触发新主播流量助力计划活动； 复播主播：2024年2月1日后，对于近180天内未开播的主播，复播并连续开播超过30分钟后，自动触发新主播流量助力计划活动。【如何查看奖励】在直播过程中的实时策略中心、直播页面提醒、下播页面，查看本场已获得的新人激励流量。 图片 图片 图片 【FAQ】 1、为什么新主播/回归主播开播没有获得奖励？ 答：①发放的奖励会显示在数据大屏的活动激励流量中请自查，当天开播多场，已于第一场满30分钟的场次发放奖励，则后续场次不会发放奖励 ②每日首场直播满足30分钟仍没有激励是因为前一天主播流量很少用户停留时长很少不符合激励发放条件 ③因违反 《淘宝直播管理规则》 被处罚的场次（包括录播、挂机、多开、低俗色情等违规处罚，以及没有浮现权的直播场次）、直播场次不符合平台内容价值导向（内容质量等级1级/2级 《内容质量等级标准》 、引人不适、炒作演绎、低质绿幕等）、安全码非绿码的主播不享受激励 2、为什么回归主播没有获得奖励？ 答：说明您不符合180天内未开播的复播主播条件，可能时间不足180天，或于180天内曾开过直播预告，若新版中控台/主播APP直播列表无法查询到是因为您删除了直播回放或预告导致。
