【定时玩手机】套用黑黑老师时钟代码 - 第2页 - 欢乐水吧 - 花潮论坛

梦江南 发表于 2024-10-13 07:17

起个网名好难发表于 2024-10-12 18:16
不是偏过来了吗，偏得不够是因为那 -591 略小了点，改为 595 或干脆 600 再看看

margin: 150px 0 10px calc(50% - 600px)了也没有再过去。还有一个问题，就是把头像压住了，如果再加大点图片就还会往上走。

梦江南 发表于 2024-10-13 07:18

起个网名好难发表于 2024-10-12 18:19
text-align:center;就是让时钟居中的

帖子居中应该是margin: 150px 0 10px calc(50% - 595px);

知道这是居中代码。

梦江南 发表于 2024-10-13 07:19

红影发表于 2024-10-12 19:56
这个代码我还没仔细去看。。。

谢谢，给您添麻烦了。

梦江南 发表于 2024-10-13 07:21

红影发表于 2024-10-12 20:01
偏的量还不够

#papa { margin: -150px; text-align:center; }这个代码一加大数字，图片就往上走了。{:4_201:}

起个网名好难 发表于 2024-10-13 08:45

本帖最后由起个网名好难于 2024-10-13 11:33 编辑 <br /><br />梦江南发表于 2024-10-13 07:18
知道这是居中代码。

<style>
#outBlk {
position: relative;
width: 1028px;
height: 700px;
background: #000 url('https://pic.imgdb.cn/item/6709bdaed29ded1a8c3ac037.gif');
box-shadow: 2px 2px 4px #000;
z-index: 1;
margin:100px 0 40px calc(50% - 595px);
overflow: hidden;
border-radius: 32px;
text-align: center;
}

#hourHand,
#minHand,
#secHand {
animation: cycle var(--dur) linear infinite;
}

#hourHand {
--begin: 0deg;
--dur: 216000s;
}

#minHand {
--begin: 0deg;
--dur: 3600s;
}

#secHand {
--begin: 0deg;
--dur: 60s;
}

#scale {
font: normal 16px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-anchor: middle;
dominant-baseline: middle;
fill: cyan;
user-select: none;
}

@keyframes cycle {
from {
   transform: rotate(var(--begin));
}

to {
   transform: rotate(calc(360deg + var(--begin)));
}
}
</style>
<div id="outBlk">
<svg id="wClock" width="230" height="400" viewBox="-100 -100 200 200">
<defs>
   <linearGradient id="bgc" x1="0" x2="1" y1="0" y2="1">
   <stop offset="0%" stop-color="red" />
   <stop offset="50%" stop-color="green" />
   <stop offset="100%" stop-color="navy" />
   </linearGradient>
</defs>
<circle cx="0" cy="0" r="95" fill="dimgray" stroke="url(#bgc)" stroke-width="10" />
<g id="scale">
   <text font-size="14" fill="silver" text-anchor="middle">
   <tspan id="tDate" x="5" y="-35">日期</tspan>
   <tspan id="tDay" x="0" y="-15">星期</tspan>
   <tspan x="0" y="40" fill="gray">HUACHAO</tspan>
   </text>
</g>
<line id="hourHand" x1="0" y1="0" x2="0" y2="-65" stroke="whitesmoke" stroke-width="4" />
<line id="minHand" x1="0" y1="0" x2="0" y2="-75" stroke="snow" stroke-width="3" />
<line id="secHand" x1="0" y1="0" x2="0" y2="-85" stroke="white" stroke-width="2" />
<circle cx="0" cy="0" r="6" fill="red" stroke="white" stroke-width="2" />
</svg>
</div>
<script>
SetAttr = (elm, objData) => {
for (var key in objData) {
   elm.setAttribute(key, objData);
}
};
makeScale = (total = 60) => {
var deg = 360 / total;
Array(total).fill('').forEach((l, k) => {
   var w = -6;
   if (k % 5 === 0) {
   var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
   SetAttr(t, {
      transform: `rotate(${deg * k - 60} 0 0) translate(75) rotate(${-1 * (deg * k - 60)} 0 0)`
   });
   t.textContent = k / 5 + 1;
   scale.appendChild(t);
   w = -4;
   }
   l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
   SetAttr(l, {
   transform: `rotate(${deg * k - 60} 0 0) translate(90)`,
   x1: 0,
   y1: 0,
   x2: w,
   y2: 0,
   stroke: 'cyan'
   });
   scale.appendChild(l);
});
};
SetTime = () => {
var now = new Date();
var hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
   min = now.getMinutes(),
   sec = now.getSeconds(),
   msec = now.getMilliseconds();
var hDeg = hr * 30 + (min * 6 / 12),
   mDeg = min * 6 + (sec * 6 / 60),
   sDeg = sec * 6 + (msec * 0.36 / 1000);
hourHand.style.setProperty('--begin', hDeg + 'deg');
minHand.style.setProperty('--begin', mDeg + 'deg');
secHand.style.setProperty('--begin', sDeg + 'deg');
};
SetDate = () => {
var sDate = new Date();
var sDateS = sDate.getSeconds() * 1000,
   sDateMs = sDate.getMilliseconds();
tDate.textContent = `${sDate.getFullYear()}年${sDate.getMonth() + 1}月${sDate.getDate()}日`;
tDay.textContent = `星期${'日一二三四五六'.substr(sDate.getDay(),1)}`;
setTimeout(() => {
   SetDate();
}, 60000 - sDateS - sDateMs);
};
makeScale();
SetTime();
SetDate();
</script>
<audio style="width:0px;height:px;" controls="controls" autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=1365013691.mp3" type="audio/mpeg"></audio>

起个网名好难 发表于 2024-10-13 08:47

昨天在第一页恐怕与主帖冲突把一些 id 和变量改个名实质没变的

梦江南 发表于 2024-10-13 09:59

起个网名好难发表于 2024-10-13 08:45
#outBlk {
position: relative;
width: 1028px;

看代码，老师把代码都重新都编辑了。我怎么会啊！{:4_201:}

梦江南 发表于 2024-10-13 09:59

起个网名好难发表于 2024-10-13 08:47
昨天在第一页恐怕与主帖冲突把一些 id 和变量改个名实质没变的

谢谢，辛苦了！{:4_187:}

红影发表于 2024-10-13 10:00

梦江南发表于 2024-10-13 07:19
谢谢，给您添麻烦了。

没事啊，我也正好学习一下{:4_204:}

梦油发表于 2024-10-13 10:02

梦江南发表于 2024-10-12 17:26
问好梦油老师，这个时钟很准的。

你能把这个时钟做到“签名”里吗？

红影发表于 2024-10-13 10:04

梦江南发表于 2024-10-13 07:21
#papa { margin: -150px; text-align:center; }这个代码一加大数字，图片就往上走了。

这句里的margin是4个方向的，调这个值当然不行，你上一句里不是有4个方向单独调整的么，只调左方向数值就行，这句不要了，合并上去，也就是留着text-align:center;到上一句里，然后删掉这句，上面那句的位置调整就起作用了。

起个网名好难 发表于 2024-10-13 10:42

梦江南发表于 2024-10-13 09:59
看代码，老师把代码都重新都编辑了。我怎么会啊！
昨天回帖都还在第一页，想简单修改发恐怕冲突，现在1#也是改过的不然就用那原帖代码改也一样，其实真只是做了极少极少的一点点改动。

梦江南 发表于 2024-10-13 11:27

红影发表于 2024-10-13 10:00
没事啊，我也正好学习一下

也好吧，就给您一次学习的机会。{:4_173:}

梦江南 发表于 2024-10-13 11:28

梦油发表于 2024-10-13 10:02
你能把这个时钟做到“签名”里吗？

梦油老师，我还没有这个水平把时钟做到“签名”里。{:4_201:}

梦江南 发表于 2024-10-13 11:31

红影发表于 2024-10-13 10:04
这句里的margin是4个方向的，调这个值当然不行，你上一句里不是有4个方向单独调整的么，只调左方向数值就 ...

我记下您的东西，我再去试试。{:4_204:}

梦江南 发表于 2024-10-13 11:32

起个网名好难发表于 2024-10-13 10:42
昨天回帖都还在第一页，想简单修改发恐怕冲突，现在1#也是改过的不然就用那原帖代码改也一样，其实真只是 ...

您把代码写法改了，看了更清楚明白。{:4_204:}

起个网名好难 发表于 2024-10-13 11:35

梦江南发表于 2024-10-13 11:32
您把代码写法改了，看了更清楚明白。

代码格式美化了下对实质没影响

梦江南 发表于 2024-10-13 11:40

起个网名好难发表于 2024-10-13 11:35
代码格式美化了下对实质没影响

真厉害！{:4_187:}

起个网名好难 发表于 2024-10-13 11:45

梦江南发表于 2024-10-13 11:40
真厉害！

厉害的是工具，靠人工会累死人的{:5_102:}

梦江南 发表于 2024-10-13 14:07

起个网名好难发表于 2024-10-13 11:45
厉害的是工具，靠人工会累死人的

工具不是也要人去操作的吗。

页: 1 [2] 3 4

花潮论坛's Archiver