Кнопка для перехода со страницы на страницу

Итак, я просмотрел страницы на странице и увидел смешанные методы.Кнопка для перехода со страницы на страницу

У меня есть полная анимация холста с функциональностью щелчка и клавиатуры и все, но я хочу, чтобы перед этим был пустой экран, и у него есть кнопка, которая говорит «Старт».

Должен ли я создать новый html-файл? Или функция, которая очищает холст и имеет кнопку на ней, которая переходит к анимации? И как общий настрой для этого выглядит?

источник

2015-12-11 Jclee

У вас может быть даже div, который расположен напротив холста, как под тем же самым домом. При нажатии на div устанавливается невидимое. –

же страницу Решение
Создать div контейнер. Сделать все в контейнере нет, кроме кнопки запуска. Когда нажата кнопка запуска, запускается функция JS, которая устанавливает все в контейнере в правильное свойство отображения и делает кнопку запуска невидимой. Не то, чтобы манипулирование DOM было дорогостоящей операцией и должно выполняться экономно. http://jsfiddle.net/qrj3Lxb5/1/

HTML

<body> 
    <div> 
    <canvas id="myCanvas"></canvas> 
    <button id="btn" onclick="start(this.id)">Start</button> 
    </div> 
</body>

CSS

#myCanvas { 
    display: none 
} 

#btn { 
    margin: 0 auto; 
} 

div { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center 
} 

html { 
    height: 100% 
} 

body { 
    height: 100% 
}

JS старт вар = функция (ID) { вар с = document.getElementById ("myCanvas"); c.style.display = "inline-block"; var btn = document.getElementById (id); btn.style.display = "none"; }

document.addEventListener("DOMContentLoaded", function(event) { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(95, 50, 40, 0, 2 * Math.PI); 
    ctx.stroke(); 
});

Вы можете также иметь новый HTML-страницу для холста. Вам решать.

источник

2015-12-11 18:33:12

Действительно полезно! Я определенно предпочитаю это, имея новую html-страницу. Взаимоотношения между функцией и кнопкой были тем, что меня путало, но я думаю, что получаю это сейчас. – Jclee

Если вам это нравится, вы должны проверить JavaScript SPA (приложение для одиночной страницы), например, AngularJS или React. Как только вы узнаете, как использовать их, soooo легко сделать такие вещи. –

Кнопка для перехода со страницы на страницу

ответ

Смежные вопросы