javascript - 我怎样才能让箭头进入时钟？
问题描述
当您打开页面时，箭头会向上看，并且仅在一秒钟后显示该去哪里。我需要在没有这一秒的情况下启动它们，但我无法更改 setInterval(1000)，而且我对如何解决这个问题的想法为零。请帮忙。setInterval(moveArrows, 1000) 在代码末尾
我需要发布这个问题，但我在这里没有足够的文字，所以我会做广告：Lorem ipsum dolor sit amet，consectetur adipisicing elit。Adipisci architecto deserunt dicta fuga, fugit harum id, illo laboriosam, libero nisi nulla placeat porro quasi quisquam saepe suscipit temporibus veritatis voluptates。
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);
// задаю атрибуты/стили
hourCircle.setAttributeNS(null, 'cx', hourCenterX);
hourCircle.setAttributeNS(null, 'cy', hourCenterY);
hourCircle.setAttributeNS(null, 'r', 40);
hourCircle.setAttributeNS(null, 'fill', '#48b382');
hourCircle.setAttributeNS(null, 'stroke', 'none');
// cоздаю текс
let text = document.createElementNS(svg_xnls, 'text');
svg.appendChild(text);
// контент текста равен i
text.textContent = i;
// задаю атрибуты/стили
text.setAttributeNS(null, 'x', hourCenterX);
text.setAttributeNS(null, 'y', hourCenterY + 13);
text.style.width = '80';
text.style.height = '80';
text.style.fontSize = '40';
text.style.fontWeight = 'bold';
text.style.textAnchor = 'middle';
}
}
drawHours();
// создаю функцию стрелок
function drawArrows(hour_arrow, minute_arrow, second_aqrrow) {
// создаю стрелку часов
const hourArrow = document.createElementNS(svg_xnls, 'line');
// задаю атрибуты/стили
hourArrow.setAttributeNS(null, 'x1', widthHalf);
hourArrow.setAttributeNS(null, 'x2', widthHalf);
hourArrow.setAttributeNS(null, 'y1', widthHalf);
hourArrow.setAttributeNS(null, 'y2', 100);
hourArrow.setAttributeNS(null, 'stroke', '#000000');
hourArrow.setAttributeNS(null, 'stroke-linecap', 'round');
hourArrow.setAttributeNS(null, 'stroke-width', 6);
hourArrow.setAttributeNS(null, 'id', 'hours');
// рисую стрелку
svg.appendChild(hourArrow);
// создаю стрелку часов
const minuteArrow = document.createElementNS(svg_xnls, 'line');
// задаю атрибуты/стили
minuteArrow.setAttributeNS(null, 'x1', widthHalf);
minuteArrow.setAttributeNS(null, 'x2', widthHalf);
minuteArrow.setAttributeNS(null, 'y1', widthHalf);
minuteArrow.setAttributeNS(null, 'y2', 60);
minuteArrow.setAttributeNS(null, 'stroke', '#0000ff');
minuteArrow.setAttributeNS(null, 'stroke-linecap', 'round');
minuteArrow.setAttributeNS(null, 'stroke-width', 4);
minuteArrow.setAttributeNS(null, 'id', 'minutes');
// рисую стрелку
svg.appendChild(minuteArrow);
// создаю стрелку часов
const secondArrow = document.createElementNS(svg_xnls, 'line');
// задаю атрибуты/стили
secondArrow.setAttributeNS(null, 'x1', widthHalf);
secondArrow.setAttributeNS(null, 'x2', widthHalf);
secondArrow.setAttributeNS(null, 'y1', widthHalf);
secondArrow.setAttributeNS(null, 'y2', 40);
secondArrow.setAttributeNS(null, 'stroke', '#ff2000');
secondArrow.setAttributeNS(null, 'stroke-linecap', 'round');
secondArrow.setAttributeNS(null, 'stroke-width', 2);
secondArrow.setAttributeNS(null, 'id', 'seconds');
// рисую стрелку
svg.appendChild(secondArrow);
}
drawArrows();
// создаю элемент текста
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';
window.onload = function operation() {
function moveArrows() {
const now = new Date();
let seconds = now.getSeconds() * 6;
// console.log(seconds);
let minutes = now.getMinutes() * 6;
// console.log(minutes);
// задаю так часы, чтобы они не перескакивали с часа на час, а плавно шли от часа к часу
let hours = (now.getHours() + now.getMinutes() / 60 + now.getSeconds() * 3600) * 30;
// беру стрелки по Id, чтоб потом передать им анимацию
let hoursStyle = document.getElementById('hours');
let minutesStyle = document.getElementById('minutes');
let secondsStyle = document.getElementById('seconds');
// задаю анимацию
secondsStyle.setAttributeNS(null, 'transform', 'rotate(' + seconds + ' 300 300)');
minutesStyle.setAttributeNS(null, 'transform', 'rotate(' + minutes + ' 300 300)');
hoursStyle.setAttributeNS(null, 'transform', 'rotate(' + hours + ' 300 300)');
// создаю функцию в которой буду показывать время в виде циферок
function showTime(time) {
// делаю проверку для красоты, (const textHour = now.getHours() - работает одинаково)
const textHour = (now.getHours() < 10) ? ('0' + now.getHours()) : (now.getHours());
const textMinutes = (now.getMinutes() < 10) ? ('0' + now.getMinutes()) : (now.getMinutes());
const textSeconds = (now.getSeconds() < 10) ? ('0' + now.getSeconds()) : (now.getSeconds());
// беру по id мой текст и вставляю туда время
document.getElementById("text-time").textContent = textHour + ':' + textMinutes + ':' + textSeconds;
}
showTime();
}
setInterval(moveArrows, 1000);
};
解决方案
只需moveArrows()在初始化时调用您的函数。
drawArrows();
moveArrows();
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);
// задаю атрибуты/стили
hourCircle.setAttributeNS(null, 'cx', hourCenterX);
hourCircle.setAttributeNS(null, 'cy', hourCenterY);
hourCircle.setAttributeNS(null, 'r', 40);
hourCircle.setAttributeNS(null, 'fill', '#48b382');
hourCircle.setAttributeNS(null, 'stroke', 'none');
// cоздаю текс
let text = document.createElementNS(svg_xnls, 'text');
svg.appendChild(text);
// контент текста равен i
text.textContent = i;
// задаю атрибуты/стили
text.setAttributeNS(null, 'x', hourCenterX);
text.setAttributeNS(null, 'y', hourCenterY + 13);
text.style.width = '80';
text.style.height = '80';
text.style.fontSize = '40';
text.style.fontWeight = 'bold';
text.style.textAnchor = 'middle';
}
}
drawHours();
// создаю функцию стрелок
function drawArrows(hour_arrow, minute_arrow, second_aqrrow) {
// создаю стрелку часов
const hourArrow = document.createElementNS(svg_xnls, 'line');
// задаю атрибуты/стили
hourArrow.setAttributeNS(null, 'x1', widthHalf);
hourArrow.setAttributeNS(null, 'x2', widthHalf);
hourArrow.setAttributeNS(null, 'y1', widthHalf);
hourArrow.setAttributeNS(null, 'y2', 100);
hourArrow.setAttributeNS(null, 'stroke', '#000000');
hourArrow.setAttributeNS(null, 'stroke-linecap', 'round');
hourArrow.setAttributeNS(null, 'stroke-width', 6);
hourArrow.setAttributeNS(null, 'id', 'hours');
// рисую стрелку
svg.appendChild(hourArrow);
// создаю стрелку часов
const minuteArrow = document.createElementNS(svg_xnls, 'line');
// задаю атрибуты/стили
minuteArrow.setAttributeNS(null, 'x1', widthHalf);
minuteArrow.setAttributeNS(null, 'x2', widthHalf);
minuteArrow.setAttributeNS(null, 'y1', widthHalf);
minuteArrow.setAttributeNS(null, 'y2', 60);
minuteArrow.setAttributeNS(null, 'stroke', '#0000ff');
minuteArrow.setAttributeNS(null, 'stroke-linecap', 'round');
minuteArrow.setAttributeNS(null, 'stroke-width', 4);
minuteArrow.setAttributeNS(null, 'id', 'minutes');
// рисую стрелку
svg.appendChild(minuteArrow);
// создаю стрелку часов
const secondArrow = document.createElementNS(svg_xnls, 'line');
// задаю атрибуты/стили
secondArrow.setAttributeNS(null, 'x1', widthHalf);
secondArrow.setAttributeNS(null, 'x2', widthHalf);
secondArrow.setAttributeNS(null, 'y1', widthHalf);
secondArrow.setAttributeNS(null, 'y2', 40);
secondArrow.setAttributeNS(null, 'stroke', '#ff2000');
secondArrow.setAttributeNS(null, 'stroke-linecap', 'round');
secondArrow.setAttributeNS(null, 'stroke-width', 2);
secondArrow.setAttributeNS(null, 'id', 'seconds');
// рисую стрелку
svg.appendChild(secondArrow);
}
function moveArrows() {
const now = new Date();
let seconds = now.getSeconds() * 6;
// console.log(seconds);
let minutes = now.getMinutes() * 6;
// console.log(minutes);
// задаю так часы, чтобы они не перескакивали с часа на час, а плавно шли от часа к часу
let hours = (now.getHours() + now.getMinutes() / 60 + now.getSeconds() * 3600) * 30;
// беру стрелки по Id, чтоб потом передать им анимацию
let hoursStyle = document.getElementById('hours');
let minutesStyle = document.getElementById('minutes');
let secondsStyle = document.getElementById('seconds');
// задаю анимацию
secondsStyle.setAttributeNS(null, 'transform', 'rotate(' + seconds + ' ' + widthHalf + ' ' + heightHalf + ')');
minutesStyle.setAttributeNS(null, 'transform', 'rotate(' + minutes + ' ' + widthHalf + ' ' + heightHalf + ')');
hoursStyle.setAttributeNS(null, 'transform', 'rotate(' + hours + ' ' + widthHalf + ' ' + heightHalf + ')');
// создаю функцию в которой буду показывать время в виде циферок
function showTime(time) {
// делаю проверку для красоты, (const textHour = now.getHours() - работает одинаково)
const textHour = (now.getHours() < 10) ? ('0' + now.getHours()) : (now.getHours());
const textMinutes = (now.getMinutes() < 10) ? ('0' + now.getMinutes()) : (now.getMinutes());
const textSeconds = (now.getSeconds() < 10) ? ('0' + now.getSeconds()) : (now.getSeconds());
// беру по id мой текст и вставляю туда время
document.getElementById("text-time").textContent = textHour + ':' + textMinutes + ':' + textSeconds;
}
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() {
setInterval(moveArrows, 1000);
};<svg id="svg" width="300" height="300">
</svg>推荐阅读
- java - 如何遍历一个双链表并创建一个新列表到一个特定的值？
- objective-c - NSBezierPath line thins out
- sql - 我需要下载具有给定详细信息的数据库
- typescript - 通过 Play 商店与付款集成的 Ionic 应用程序
- python-3.x - 如何有条件地更新以前的迭代器附加值？
- python-3.x - 如何在不将错误处理写入函数的情况下创建自定义错误处理类
- python - masonite 'Post' 对象没有属性 'controller'
- python - 如何将字符串作为字典中的键传递
- fragmentpageradapter - onLoadFinished() 没有被调用，但 onCreateLoader() 被调用
- python - How to fix PackageNotFoundError for exe files