Question

我正在尝试使用材料设计重现时钟（没有jquery）。但我不能设法在生成元素的两个div之间划线。坐标显然是错误的，我一直在尝试其他解决方案，我在这个网站上找到但没有任何作用。这是代码：

＆＃13;

'use strict';

(function () {
    var hourPicker = document.querySelectorAll(".hourPicker");
    for (var i = 0; i < hourPicker.length; i++) {
        var circle = hourPicker[i].querySelector(".circle");
        var txt = "";
        var angle = 360 / 12;
        var s = 90;
        var hours = ["6", "7", "8", "9", "10", "11", "12", "1", "2", "3", "4", "5"];
        for (var i2 = 0; i2 < 12; i2++) {

            txt += '<div class="item" style=" transform: rotate(' + s + 'deg) translate(6rem) rotate(-' + s + 'deg);">' + hours[i2] + '</div>';
            s += angle
        }
        circle.innerHTML = txt;
        var item = circle.querySelectorAll(".item");


        for(var ii = 0 ; ii <item.length ; ii++)
        console.log(item[ii].innerHTML +':'+ item[ii].getBoundingClientRect().top +";" + item[ii].getBoundingClientRect().left);




        var y2 = item[1].getBoundingClientRect().top;
        var x2 = item[1].getBoundingClientRect().left;


        var x1 = circle.offsetWidth / 2;
        var y1 = circle.offsetHeight / 2;

        circle.innerHTML += '<svg width="500" height="500"><line x1="' + x1 + '" y1="' + y1 + '" x2="' + x2 + '" y2="' + y2 + '" stroke="black"/></svg>';
    }

})();

＆＃13;

*{
  
}
body{
    font-size: 50%; 
    width: 50%;
    margin: 0 auto;
}
main{
    margin: 5rem;
    font-size: 1rem;
}
.hourPicker{
    display: inline-block;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.hourPicker .head{
    text-align: right;
    padding: 1rem 2rem; 
    background: #009688;
    font-size: 2.5rem;
    color: white;
    
}
.hourPicker .body{
    position: relative;
    margin:  2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hourPicker .circle {
    margin: 0;
    padding: 0;
    position: relative;
    background-color: #EEEEEE;
    height: 15rem;
    border-radius: 50%;
    width: 15rem;
  
}
.hourPicker .item{
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    font-size: .8rem;
    opacity: .7;
    position: absolute;
    top: 45%; 
    left: 45%;
    line-height: 1.5rem;
}
.hourPicker .item:hover{
    border-radius: 50%;
    background: #009688;
    color: white;
}
.hourPicker .center_circle{
    position: absolute;
    background: #009688;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    
}
.hourPicker .arrow_circle{
    position: absolute;
    width: 5.5rem;
    background: #009688;
    height: 0.1rem;
    right: 2rem;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../styles/Normalize.min.css" />
    <link rel="stylesheet" type="text/css" href="hour.css">
</head>

<body>
    <main>
        <div class="hourPicker">
            <div class="head">
                <div class="hour">15:30</div>
            </div>
            <div class="body">
                <div class="circle"></div>
                <div class="center_circle"></div>
                <!--<div class="arrow_circle"></div>-->
                <!--<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>  -->
            </div>
            <div class="bottom"></div>
        </div>
    </main>
    <script type="text/javascript" src="hour.js"></script>
</body>

</html>

＆＃13;

＆＃13; 非常感谢。托马斯

Answer 1

混合HTML＆amp; SVG元素可能有点棘手，你也可以让画布接收点击次数，但是，你需要的是考虑到SVG是相对于圆的，而getBoundingClientRect不是，getBoundingClientRect也给你左上角，而不是中间元素;

EDI：向SVG添加指针事件：无以防止干扰clicks.hover;

'use strict';

(function () {
    var hourPicker = document.querySelectorAll(".hourPicker");
    for (var i = 0; i < hourPicker.length; i++) {
        var circle = hourPicker[i].querySelector(".circle");
        var txt = "";
        var angle = 360 / 12;
        var s = 90;
        var hours = ["6", "7", "8", "9", "10", "11", "12", "1", "2", "3", "4", "5"];
        for (var i2 = 0; i2 < 12; i2++) {

            txt += '<div class="item" style=" transform: rotate(' + s + 'deg) translate(6rem) rotate(-' + s + 'deg);">' + hours[i2] + '</div>';
            s += angle
        }
        circle.innerHTML = txt;
        var item = circle.querySelectorAll(".item");


        for(var ii = 0 ; ii <item.length ; ii++)
        console.log(item[ii].innerHTML +':'+ item[ii].getBoundingClientRect().top +";" + item[ii].getBoundingClientRect().left);


  console.log(item[1])

        var y2 = item[1].getBoundingClientRect().top;
        var x2 = item[1].getBoundingClientRect().left;
        
        var w2 = item[1].getBoundingClientRect().width;
        var h2 = item[1].getBoundingClientRect().height;
        
        var circlePos = circle.getBoundingClientRect();


        var x1 = circle.offsetWidth / 2;
        var y1 = circle.offsetHeight / 2;

        circle.innerHTML += '<svg width="240" height="240"><line x1="' + x1 + '" y1="' + y1 + '" x2="' + ((x2-circlePos.left)+w2/2) + '" y2="' + ((y2-circlePos.top)+h2/2) + '" stroke="black"/></svg>';
    }

})();

*{
  
}
body{
    font-size: 50%; 
    width: 50%;
    margin: 0 auto;
}
main{
    margin: 5rem;
    font-size: 1rem;
}
.hourPicker{
    display: inline-block;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.hourPicker .head{
    text-align: right;
    padding: 1rem 2rem; 
    background: #009688;
    font-size: 2.5rem;
    color: white;
    
}
.hourPicker .body{
    position: relative;
    margin:  2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hourPicker .circle {
    margin: 0;
    padding: 0;
    position: relative;
    background-color: #EEEEEE;
    height: 15rem;
    border-radius: 50%;
    width: 15rem;
  
}
.hourPicker .item{
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    font-size: .8rem;
    opacity: .7;
    position: absolute;
    top: 45%; 
    left: 45%;
    line-height: 1.5rem;
}
.hourPicker .item:hover{
    border-radius: 50%;
    background: #009688;
    color: white;
}
.hourPicker .center_circle{
    position: absolute;
    background: #009688;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    
}
.hourPicker .arrow_circle{
    position: absolute;
    width: 5.5rem;
    background: #009688;
    height: 0.1rem;
    right: 2rem;
}
svg {
  position: absolute;
  pointer-events:none;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../styles/Normalize.min.css" />
    <link rel="stylesheet" type="text/css" href="hour.css">
</head>

<body>
    <main>
        <div class="hourPicker">
            <div class="head">
                <div class="hour">15:30</div>
            </div>
            <div class="body">
                <div class="circle"></div>
                <div class="center_circle"></div>
                <!--<div class="arrow_circle"></div>-->
                <!--<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>  -->
            </div>
            <div class="bottom"></div>
        </div>
    </main>
    <script type="text/javascript" src="hour.js"></script>
</body>

</html>

Answer 2

我认为这可能与你想要的一致。它是用HTML和Javascript http://www.encodedna.com/html5/canvas/simple-analog-clock-using-canvas-javascript.htm

制作的模拟时钟

用线连接两个div

2 个答案: