红枫 发表于 2021-5-30 13:46

北京时间--《红枫牌》时钟

<html lang="ja">
<head>
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.10.0 for Windows">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>北京时间--《红枫牌》时钟</title>

<style>
#clocks {
        display: block;
        width: 650px;
        height: 650px;
}
.clock {
        position: absolute;


</style>

</head>
<body >
<br>
<br><br><br><br><br><br><br><br>
<div align="center"><span style="font-size: 36pt;color: #ff0000;text-shadow: 5px 5px 0.15em #33ffff;">北京时间标准时钟</span>



<div style="position: absolute; width: 650px; height: 650px;left:240px; top: 150; pxbackground-image: linear-gradient(90deg, #6a5acd 0%, #ffffff 40%, #6a5acd 160%);-WEBKIT-linear-gradient(90deg, #6a5acd 0%, #ffffff 40%, #6a5acd 160%);" id="layer1" >
<div id="clocks">
<img src="https://pic.imgdb.cn/item/60aa26c035c5199ba7b9b826.png" width="650" height="650" id="image_body" class="clock">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387ab.gif" width="50" height="50" style="position: absolute;left: 625px; top: 150px">

<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387fb.png" width="650" height="650" id="image_short" class="clock">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387c5.png" width="650" height="650" id="image_long" class="clock">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387df.png" width="650" height="650" id="image_sec" class="clock">
</div>



</div>

<div id="clock_time">
<script language="JavaScript">


window.onload = function() {
       
        timerID = setInterval("moveTimer()",1000);
};

function moveTimer() {
        var date,Hou,Min,Sec,hDeg,mDeg,sDeg;

        date = new Date();

        Hou = date.getHours();
        Min = date.getMinutes();
        Sec = date.getSeconds();

        hDeg = (Hou % 12) * (360 / 12);
        mDeg = Min * (360 / 60);
        sDeg = Sec * (360 / 60);

        hDeg += (Min / 60) * (360 / 12);
        mDeg += (Sec / 60) * (360 / 60);
       
       


       

        document.getElementById("image_short").style.transform = "rotate(" + hDeg + "deg)";
        document.getElementById("image_short").style.MozTransform = "rotate(" + hDeg + "deg)";
        document.getElementById("image_short").style.WebkitTransform = "rotate(" + hDeg + "deg)";
        document.getElementById("image_short").style.msTransform = "rotate(" + hDeg + "deg)";
       

        document.getElementById("image_long").style.transform = "rotate(" + mDeg + "deg)";
        document.getElementById("image_long").style.MozTransform = "rotate(" + mDeg + "deg)";
        document.getElementById("image_long").style.WebkitTransform = "rotate(" + mDeg + "deg)";
        document.getElementById("image_long").style.msTransform = "rotate(" + mDeg + "deg)";
       
       
        document.getElementById("image_sec").style.transform = "rotate(" + sDeg + "deg)";
        document.getElementById("image_sec").style.MozTransform = "rotate(" + sDeg + "deg)";
        document.getElementById("image_sec").style.WebkitTransform = "rotate(" + sDeg + "deg)";
        document.getElementById("image_sec").style.msTransform = "rotate(" + sDeg + "deg)";
       
}

</script>

</div>
<p align="center">


<br>




</p>
</body>
</html>

红枫 发表于 2021-5-30 13:59

还是定位问题，且把编辑按钮给屏蔽了。

195400 发表于 2021-5-30 17:28

<style type="text/css">
#cclocks {
        display: block;
        width: 650px;
        height: 650px;
        position:absolute;
        left:-275px;
        top:75px;
}
.cclock {
        position: absolute;
        width:650px;
        height:650px;
}

</style>

<div style="text-align:center;position:relative;width:800px;height:800px;margin:16px auto;">
<span style="font-size: 36pt;color: #ff0000;text-shadow: 5px 5px 0.15em #33ffff;">北京时间标准时钟</span>



<!-- div style="position: absolute; width: 650px; height: 650px;left:240px; top: 150px;
background-image: linear-gradient(90deg, #6a5acd 0%, #ffffff 40%, #6a5acd 160%);
-webkit-linear-gradient(90deg, #6a5acd 0%, #ffffff 40%, #6a5acd 160%);" -->
<div id="cclocks">
<img src="https://pic.imgdb.cn/item/60aa26c035c5199ba7b9b826.png" id="clock_body" class="cclock">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387fb.png" id="clock_short" class="cclock">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387c5.png" id="clock_long" class="cclock">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387df.png" id="clock_sec" class="cclock">

</div>
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387ab.gif" width="50" height="50" style="position: absolute;left: 350px; top:225px">

</div>

<!-- /div -->

<!-- div id="clock_time"></div -->
<script type="text/javaScript">
//window.onload = function() {
//        timerID = setInterval("cmoveTimer()",1000);
//};

function cmoveTimer() {
        var date,Hou,Min,Sec,hDeg,mDeg,sDeg;

        date = new Date();

        Hou = date.getHours();
        Min = date.getMinutes();
        Sec = date.getSeconds();

        hDeg = (Hou % 12) * (360 / 12);
        mDeg = Min * (360 / 60);
        sDeg = Sec * (360 / 60);

        hDeg += (Min / 60) * (360 / 12);
        mDeg += (Sec / 60) * (360 / 60);

        document.getElementById("clock_short").style.transform = "rotate(" + hDeg + "deg)";
        document.getElementById("clock_short").style.MozTransform = "rotate(" + hDeg + "deg)";
        document.getElementById("clock_short").style.WebkitTransform = "rotate(" + hDeg + "deg)";
        document.getElementById("clock_short").style.msTransform = "rotate(" + hDeg + "deg)";
       

        document.getElementById("clock_long").style.transform = "rotate(" + mDeg + "deg)";
        document.getElementById("clock_long").style.MozTransform = "rotate(" + mDeg + "deg)";
        document.getElementById("clock_long").style.WebkitTransform = "rotate(" + mDeg + "deg)";
        document.getElementById("clock_long").style.msTransform = "rotate(" + mDeg + "deg)";
       
       
        document.getElementById("clock_sec").style.transform = "rotate(" + sDeg + "deg)";
        document.getElementById("clock_sec").style.MozTransform = "rotate(" + sDeg + "deg)";
        document.getElementById("clock_sec").style.WebkitTransform = "rotate(" + sDeg + "deg)";
        document.getElementById("clock_sec").style.msTransform = "rotate(" + sDeg + "deg)";
       
}
setInterval(cmoveTimer,1000);
</script>

黔中一叟 发表于 2021-5-30 18:02

问好红枫朋友，欣赏佳作是美的享受，留下赞语是我的心意，愿纯真的友谊在网络的空间永远传递！

绿地水池 发表于 2021-5-30 21:52

看不到。

绿地水池 发表于 2021-5-30 21:53

问好红枫朋友。

红枫 发表于 2021-5-31 15:31

<blockquote><blockquote><blockquote><blockquote>
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_1913979" style="position: absolute; width: 750px; height: 900px;
background-image: linear-gradient(90deg, #6a5acd 0%, #ffffff 40%, #6a5acd 160%);
-webkit-linear-gradient(90deg, #6a5acd 0%, #ffffff 40%, #6a5acd 160%);">

<style type="text/css">
#cclocks {
        display: block;
        width: 650px;
        height: 650px;
        position:absolute;
        left:-275px;
        top:75px;
}
.cclock {
        position: absolute;
        width:650px;
        height:650px;
}

</style>

<div style="text-align:center;position:relative;width:800px;height:800px;">
<br><br><br>
<span style="font-size: 36pt;color: #ff0000;text-shadow: 5px 5px 0.15em #33ffff;">北京时间标准时钟</span>


<div id="cclocks"><br><br><br>
<img src="https://pic.imgdb.cn/item/60aa26c035c5199ba7b9b826.png" id="clock_body" class="cclock">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387fb.png" id="clock_short" class="cclock" style="transform: rotate(63.5deg);">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387c5.png" id="clock_long" class="cclock" style="transform: rotate(44.8deg);">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387df.png" id="clock_sec" class="cclock" style="transform: rotate(168deg);">


</div>
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387ab.gif" width="50" height="50" style="position: absolute;left: 350px; top:290px">

</div>




<script type="text/javaScript">
//window.onload = function() {
//        timerID = setInterval("cmoveTimer()",1000);
//};

function cmoveTimer() {
        var date,Hou,Min,Sec,hDeg,mDeg,sDeg;

        date = new Date();

        Hou = date.getHours();
        Min = date.getMinutes();
        Sec = date.getSeconds();

        hDeg = (Hou % 12) * (360 / 12);
        mDeg = Min * (360 / 60);
        sDeg = Sec * (360 / 60);

        hDeg += (Min / 60) * (360 / 12);
        mDeg += (Sec / 60) * (360 / 60);

        document.getElementById("clock_short").style.transform = "rotate(" + hDeg + "deg)";
        document.getElementById("clock_short").style.MozTransform = "rotate(" + hDeg + "deg)";
        document.getElementById("clock_short").style.WebkitTransform = "rotate(" + hDeg + "deg)";
        document.getElementById("clock_short").style.msTransform = "rotate(" + hDeg + "deg)";
       

        document.getElementById("clock_long").style.transform = "rotate(" + mDeg + "deg)";
        document.getElementById("clock_long").style.MozTransform = "rotate(" + mDeg + "deg)";
        document.getElementById("clock_long").style.WebkitTransform = "rotate(" + mDeg + "deg)";
        document.getElementById("clock_long").style.msTransform = "rotate(" + mDeg + "deg)";
       
       
        document.getElementById("clock_sec").style.transform = "rotate(" + sDeg + "deg)";
        document.getElementById("clock_sec").style.MozTransform = "rotate(" + sDeg + "deg)";
        document.getElementById("clock_sec").style.WebkitTransform = "rotate(" + sDeg + "deg)";
        document.getElementById("clock_sec").style.msTransform = "rotate(" + sDeg + "deg)";
       
}
setInterval(cmoveTimer,1000);
</script>
</td></tr></tbody></table>


</div>




















       
</blockquote></blockquote></blockquote></blockquote>

195400 发表于 2021-5-31 20:13

<style type="text/css">
#c_clocks {
        display: block;
        width: 650px;
        height: 650px;
        position:absolute;
        left:-275px;
        top:125px;
}
.c_clock {
        position: absolute;
        width:650px;
        height:650px;
}

</style>

<div style="position: relative; width: 750px; height: 800px; text-align:center; margin:500px auto 32px auto;
background-image: linear-gradient(90deg, #6a5acd 0%, #ffffff 40%, #6a5acd ); padding-top:24px;">

<p style="font-size: 36pt;color:red;text-shadow: 5px 5px 0.15em #3ff;margin:16px auto;">
北京时间标准时钟</p>


<div id="c_clocks">
<img src="https://pic.imgdb.cn/item/60aa26c035c5199ba7b9b826.png" id="clock_BODY" class="c_clock">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387fb.png" id="clock_HOUR" class="c_clock" style="transform: rotate(63.5deg);">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387c5.png" id="clock_MINITE" class="c_clock" style="transform: rotate(44.8deg);">
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387df.png" id="clock_SEC" class="c_clock" style="transform: rotate(168deg);">


</div>
<img src="https://pic.imgdb.cn/item/60aa25d035c5199ba7b387ab.gif"
style="width:50px; height:50px;position: absolute;left: 350px; top:275px">

</div>


<script type="text/javaScript">
//window.onload = function() {
//        timerID = setInterval("showTimer()",1000);
//};

function showTimer() {
        var date,Hou,Min,Sec,hDeg,mDeg,sDeg;

        date = new Date();

        Hou = date.getHours();
        Min = date.getMinutes();
        Sec = date.getSeconds();

        hDeg = (Hou % 12) * (360 / 12);
        mDeg = Min * (360 / 60);
        sDeg = Sec * (360 / 60);

        hDeg += (Min / 60) * (360 / 12);
        mDeg += (Sec / 60) * (360 / 60);

        document.getElementById("clock_HOUR").style.transform = "rotate(" + hDeg + "deg)";
        document.getElementById("clock_HOUR").style.MozTransform = "rotate(" + hDeg + "deg)";
        document.getElementById("clock_HOUR").style.WebkitTransform = "rotate(" + hDeg + "deg)";
        document.getElementById("clock_HOUR").style.msTransform = "rotate(" + hDeg + "deg)";
       

        document.getElementById("clock_MINITE").style.transform = "rotate(" + mDeg + "deg)";
        document.getElementById("clock_MINITE").style.MozTransform = "rotate(" + mDeg + "deg)";
        document.getElementById("clock_MINITE").style.WebkitTransform = "rotate(" + mDeg + "deg)";
        document.getElementById("clock_MINITE").style.msTransform = "rotate(" + mDeg + "deg)";
       
       
        document.getElementById("clock_SEC").style.transform = "rotate(" + sDeg + "deg)";
        document.getElementById("clock_SEC").style.MozTransform = "rotate(" + sDeg + "deg)";
        document.getElementById("clock_SEC").style.WebkitTransform = "rotate(" + sDeg + "deg)";
        document.getElementById("clock_SEC").style.msTransform = "rotate(" + sDeg + "deg)";
       
}
setInterval(showTimer,1000);
</script>

寒冬残荷 发表于 2021-5-31 21:14

好美！javaScript代码曾经也想学，但我太笨学不会。:lol

寒冬残荷 发表于 2021-5-31 21:19

是不是我还不能发代码？
页: [1]
查看完整版本: 北京时间--《红枫牌》时钟