我怎样才能让箭头进入时钟？

Question

当您打开页面时，箭头会向上看，并且仅在一秒钟后显示该去哪里。我需要在没有这一秒的情况下启动它们，但我无法更改 setInterval(1000)，而且我对如何解决这个问题的想法为零。请帮忙。setInterval(moveArrows, 1000) 在代码末尾

我需要发布这个问题，但我在这里没有足够的文字，所以我会做广告：Lorem ipsum dolor sit amet，consectetur adipisicing elit。他们放弃了他们主人的逃亡来获得话语，这些逃脱的话语，前者是辛苦的，是自由的，除非没有人能取悦他们。

const svg = document.getElementById('svg');

console.log(svg);

const svg_xnls = 'http://www.w3.org/2000/svg';

//если не найдет аттрибутов width || height, то вернет null

const width = parseFloat(svg.getAttributeNS(null, 'width'));

const height = parseFloat(svg.getAttributeNS(null, 'height'));

// радиус часиков (большого желтого круга)

const clockRadius = width / 2;

// радиус кружочков с цифрами часов времени

const radius = 0.8 * clockRadius;

//создаю переменные половин ширины и высоты

let widthHalf = width / 2;

let heightHalf = height / 2;

// создаю функцию желтого круга

function drawClockBody(clock) {

    // создаю круг

    let clockBodyStyle = document.createElementNS(svg_xnls, 'circle');

    // задаю атрибуты/стили (с - center)

    clockBodyStyle.setAttributeNS(null, 'cx', widthHalf);

    clockBodyStyle.setAttributeNS(null, 'cy', heightHalf);

    clockBodyStyle.setAttributeNS(null, 'r', widthHalf);

    clockBodyStyle.setAttributeNS(null, 'fill', '#fcca66');

    clockBodyStyle.setAttributeNS(null, 'stroke', 'none');

    //рисую круг в HTML

    svg.appendChild(clockBodyStyle);

}

drawClockBody();

// можно было сделать двумя функциями

// создаю функцию для кружочков с цифрами

function drawHours(hour, hourValue) {

    // градус угла

    const angel = 30;

    for (let i = 1; i <= 12; i++) {

        // рисую круг

        let hourCircle = document.createElementNS(svg_xnls, 'circle');

        svg.appendChild(hourCircle);

        // раставляю кружочки по кругу

        let angelRadian = (angel * i * Math.PI) / 180;

        //считаю центр кружочка относительно тела часов

        let hourCenterX = clockRadius + radius * Math.sin(angelRadian);

        let hourCenterY = clockRadius - radius * Math.cos(angelRadian);

    }

}

Answer 1

只需moveArrows()在初始化时调用您的函数。drawArrows();moveArrows();const svg = document.getElementById('svg');//console.log(svg);const svg_xnls = 'http://www.w3.org/2000/svg';//если не найдет аттрибутов width || height, то вернет nullconst width = parseFloat(svg.getAttributeNS(null, 'width'));const height = parseFloat(svg.getAttributeNS(null, 'height'));// радиус часиков (большого желтого круга)const clockRadius = width / 2;// радиус кружочков с цифрами часов времениconst radius = 0.8 * clockRadius;//создаю переменные половин ширины и высотыlet widthHalf = width / 2;let heightHalf = height / 2;// создаю функцию желтого кругаfunction drawClockBody(clock) {&nbsp; &nbsp; // создаю круг&nbsp; &nbsp; let clockBodyStyle = document.createElementNS(svg_xnls, 'circle');&nbsp; &nbsp; // задаю атрибуты/стили (с - center)&nbsp; &nbsp; clockBodyStyle.setAttributeNS(null, 'cx', widthHalf);&nbsp; &nbsp; clockBodyStyle.setAttributeNS(null, 'cy', heightHalf);&nbsp; &nbsp; clockBodyStyle.setAttributeNS(null, 'r', widthHalf);&nbsp; &nbsp; clockBodyStyle.setAttributeNS(null, 'fill', '#fcca66');&nbsp; &nbsp; clockBodyStyle.setAttributeNS(null, 'stroke', 'none');&nbsp; &nbsp; //рисую круг в HTML&nbsp; &nbsp; svg.appendChild(clockBodyStyle);}drawClockBody();// можно было сделать двумя функциями// создаю функцию для кружочков с цифрамиfunction drawHours(hour, hourValue) {&nbsp; &nbsp; // градус угла&nbsp; &nbsp; const angel = 30;&nbsp; &nbsp; for (let i = 1; i <= 12; i++) {&nbsp; &nbsp; &nbsp; &nbsp; // рисую круг&nbsp; &nbsp; &nbsp; &nbsp; let hourCircle = document.createElementNS(svg_xnls, 'circle');&nbsp; &nbsp; &nbsp; &nbsp; svg.appendChild(hourCircle);&nbsp; &nbsp; &nbsp; &nbsp; // раставляю кружочки по кругу&nbsp; &nbsp; &nbsp; &nbsp; let angelRadian = (angel * i * Math.PI) / 180;&nbsp; &nbsp; &nbsp; &nbsp; //считаю центр кружочка относительно тела часов&nbsp; &nbsp; &nbsp; &nbsp; let hourCenterX = clockRadius + radius * Math.sin(angelRadian);&nbsp; &nbsp; &nbsp; &nbsp; let hourCenterY = clockRadius - radius * Math.cos(angelRadian);&nbsp; &nbsp; &nbsp; &nbsp; // задаю атрибуты/стили&nbsp; &nbsp; &nbsp; &nbsp; hourCircle.setAttributeNS(null, 'cx', hourCenterX);&nbsp; &nbsp; &nbsp; &nbsp; hourCircle.setAttributeNS(null, 'cy', hourCenterY);&nbsp; &nbsp; &nbsp; &nbsp; hourCircle.setAttributeNS(null, 'r', 40);&nbsp; &nbsp; &nbsp; &nbsp; hourCircle.setAttributeNS(null, 'fill', '#48b382');&nbsp; &nbsp; &nbsp; &nbsp; hourCircle.setAttributeNS(null, 'stroke', 'none');&nbsp; &nbsp; &nbsp; &nbsp; // cоздаю текс&nbsp; &nbsp; &nbsp; &nbsp; let text = document.createElementNS(svg_xnls, 'text');&nbsp; &nbsp; &nbsp; &nbsp; svg.appendChild(text);&nbsp; &nbsp; &nbsp; &nbsp; // контент текста равен i&nbsp; &nbsp; &nbsp; &nbsp; text.textContent = i;&nbsp; &nbsp; &nbsp; &nbsp; // задаю атрибуты/стили&nbsp; &nbsp; &nbsp; &nbsp; text.setAttributeNS(null, 'x', hourCenterX);&nbsp; &nbsp; &nbsp; &nbsp; text.setAttributeNS(null, 'y', hourCenterY + 13);&nbsp; &nbsp; &nbsp; &nbsp; text.style.width = '80';&nbsp; &nbsp; &nbsp; &nbsp; text.style.height = '80';&nbsp; &nbsp; &nbsp; &nbsp; text.style.fontSize = '40';&nbsp; &nbsp; &nbsp; &nbsp; text.style.fontWeight = 'bold';&nbsp; &nbsp; &nbsp; &nbsp; text.style.textAnchor = 'middle';&nbsp; &nbsp; }}drawHours();// создаю функцию стрелокfunction drawArrows(hour_arrow, minute_arrow, second_aqrrow) {&nbsp; &nbsp; // создаю стрелку часов&nbsp; &nbsp; const hourArrow = document.createElementNS(svg_xnls, 'line');&nbsp; &nbsp; // задаю атрибуты/стили&nbsp; &nbsp; hourArrow.setAttributeNS(null, 'x1', widthHalf);&nbsp; &nbsp; hourArrow.setAttributeNS(null, 'x2', widthHalf);&nbsp; &nbsp; hourArrow.setAttributeNS(null, 'y1', widthHalf);&nbsp; &nbsp; hourArrow.setAttributeNS(null, 'y2', 100);&nbsp; &nbsp; hourArrow.setAttributeNS(null, 'stroke', '#000000');&nbsp; &nbsp; hourArrow.setAttributeNS(null, 'stroke-linecap', 'round');&nbsp; &nbsp; hourArrow.setAttributeNS(null, 'stroke-width', 6);&nbsp; &nbsp; hourArrow.setAttributeNS(null, 'id', 'hours');&nbsp; &nbsp; // рисую стрелку&nbsp; &nbsp; svg.appendChild(hourArrow);&nbsp; &nbsp; // создаю стрелку часов&nbsp; &nbsp; const minuteArrow = document.createElementNS(svg_xnls, 'line');&nbsp; &nbsp; // задаю атрибуты/стили&nbsp; &nbsp; minuteArrow.setAttributeNS(null, 'x1', widthHalf);&nbsp; &nbsp; minuteArrow.setAttributeNS(null, 'x2', widthHalf);&nbsp; &nbsp; minuteArrow.setAttributeNS(null, 'y1', widthHalf);&nbsp; &nbsp; minuteArrow.setAttributeNS(null, 'y2', 60);&nbsp; &nbsp; minuteArrow.setAttributeNS(null, 'stroke', '#0000ff');&nbsp; &nbsp; minuteArrow.setAttributeNS(null, 'stroke-linecap', 'round');&nbsp; &nbsp; minuteArrow.setAttributeNS(null, 'stroke-width', 4);&nbsp; &nbsp; minuteArrow.setAttributeNS(null, 'id', 'minutes');&nbsp; &nbsp; // рисую стрелку&nbsp; &nbsp; svg.appendChild(minuteArrow);&nbsp; &nbsp; // создаю стрелку часов&nbsp; &nbsp; const secondArrow = document.createElementNS(svg_xnls, 'line');&nbsp; &nbsp; // задаю атрибуты/стили&nbsp; &nbsp; secondArrow.setAttributeNS(null, 'x1', widthHalf);&nbsp; &nbsp; secondArrow.setAttributeNS(null, 'x2', widthHalf);&nbsp; &nbsp; secondArrow.setAttributeNS(null, 'y1', widthHalf);&nbsp; &nbsp; secondArrow.setAttributeNS(null, 'y2', 40);&nbsp; &nbsp; secondArrow.setAttributeNS(null, 'stroke', '#ff2000');&nbsp; &nbsp; secondArrow.setAttributeNS(null, 'stroke-linecap', 'round');&nbsp; &nbsp; secondArrow.setAttributeNS(null, 'stroke-width', 2);&nbsp; &nbsp; secondArrow.setAttributeNS(null, 'id', 'seconds');&nbsp; &nbsp; // рисую стрелку&nbsp; &nbsp; svg.appendChild(secondArrow);}function moveArrows() {&nbsp; &nbsp; const now = new Date();&nbsp; &nbsp; let seconds = now.getSeconds() * 6;&nbsp; &nbsp; // console.log(seconds);&nbsp; &nbsp; let minutes = now.getMinutes() * 6;&nbsp; &nbsp; // console.log(minutes);&nbsp; &nbsp; // задаю так часы, чтобы они не перескакивали с часа на час, а плавно шли от часа к часу&nbsp; &nbsp; let hours = (now.getHours() + now.getMinutes() / 60 + now.getSeconds() * 3600) * 30;&nbsp; &nbsp; // беру стрелки по Id, чтоб потом передать им анимацию&nbsp; &nbsp; let hoursStyle = document.getElementById('hours');&nbsp; &nbsp; let minutesStyle = document.getElementById('minutes');&nbsp; &nbsp; let secondsStyle = document.getElementById('seconds');&nbsp; &nbsp; // задаю анимацию&nbsp; &nbsp; secondsStyle.setAttributeNS(null, 'transform', 'rotate(' + seconds + ' ' + widthHalf + ' ' + heightHalf + ')');&nbsp; &nbsp; minutesStyle.setAttributeNS(null, 'transform', 'rotate(' + minutes + ' ' + widthHalf + ' ' + heightHalf + ')');&nbsp; &nbsp; hoursStyle.setAttributeNS(null, 'transform', 'rotate(' + hours + ' ' + widthHalf + ' ' + heightHalf + ')');&nbsp; &nbsp; // создаю функцию в которой буду показывать время в виде циферок&nbsp; &nbsp; function showTime(time) {&nbsp; &nbsp; &nbsp; &nbsp; // делаю проверку для красоты, (const textHour = now.getHours() - работает одинаково)&nbsp; &nbsp; &nbsp; &nbsp; const textHour = (now.getHours() < 10) ? ('0' + now.getHours()) : (now.getHours());&nbsp; &nbsp; &nbsp; &nbsp; const textMinutes = (now.getMinutes() < 10) ? ('0' + now.getMinutes()) : (now.getMinutes());&nbsp; &nbsp; &nbsp; &nbsp; const textSeconds = (now.getSeconds() < 10) ? ('0' + now.getSeconds()) : (now.getSeconds());&nbsp; &nbsp; &nbsp; &nbsp; // беру по id мой текст и вставляю туда время&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("text-time").textContent = textHour + ':' + textMinutes + ':' + textSeconds;&nbsp; &nbsp; }&nbsp; &nbsp; showTime();}// создаю элемент текстаconst textTime = document.createElementNS(svg_xnls, 'text');svg.appendChild(textTime);// задаю стилиtextTime.setAttributeNS(null, 'x', 300);textTime.setAttributeNS(null, 'y', 200);textTime.setAttributeNS(null, 'id', 'text-time');textTime.style.fontSize = '2rem';textTime.style.fontWeight = 'bold';textTime.style.textAnchor = 'middle';drawArrows();moveArrows();window.onload = function operation() {&nbsp; &nbsp; setInterval(moveArrows, 1000);};<svg id="svg" width="300" height="300"></svg>