#javascript #html #css #if-statement #togglebutton
#javascript #HTML #css #if-оператор #кнопка переключения
Вопрос:
Я новичок в изучении CSS / HTML, и я немного поработал над попыткой воссоздать атмосферу Windows 98. Однако одна вещь, с которой у меня было много проблем, — это попытка воссоздать кнопку «Пуск» с помощью простого скрипта переключения.
Вы можете увидеть пример текущего скрипта, который я использую здесь; https://thealonic.tumblr.com / большая часть работы — это моя собственная работа с некоторыми фрагментами css из старой темы, которую я использовал вместе с win98.css
Я немного осмотрелся и попробовал около 4-5 решений, но безуспешно в течение пары часов, но, похоже, ни одно из них не помогло мне добиться какого-либо прогресса, поэтому я просто попытался использовать больше простых решений, просто используя операторы if.
<head>
<style>
.start_button {
float: left; background-image: url(https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png);
height: 22px; width: 54px; margin-left: 2px; margin-top: 2px; z-index: 3; background-repeat:no-repeat;}
</style>
</head>
<body class="win98>
<div class="start_button" id="start_button" onclick="startpress()"></div>
<script>
function startpress() {
if (document.getElementById("start_button").style.backgroundImage !== "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')") {
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')" } else {
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')"}}
</script>
</body>
Это «почти» выполняет свою работу, но проблема, с которой я сталкиваюсь, заключается в том, что кнопка распознает нажатие, а затем говорит «вниз», даже с таким простым оператором if, подобным этому. Я видел, что это решение работает практически для одного и того же варианта использования, но я не понимаю, почему это не совсем работает. Есть ли что-то в HTML-скриптах, что я не совсем понимаю?
В любом случае, спасибо за любую помощь, которую я получаю заранее, и извините, если об этом спрашивали раньше, но быстрый поиск не дал ничего подобного, поскольку я не совсем уверен, что причина в том, как я обращаюсь к фоновому изображению.
Комментарии:
1. итак, наведение курсора мыши и наведение курсора мыши…. Просто переключите класс, нет причин устанавливать стили напрямую
2. @teemu, да, ты прав. Я скорректирую сообщение.
Ответ №1:
Вероятно, вам нужен Eval или что-то в этом роде в if. Но я бы выбрал что-то более простое
var startmode=true
If (startmode)
{
startmode=false
document.getElementById(«start_button»).style.BackgroundImage = «url(‘https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png ‘)»
}
ещё
{
startmode=true
document.getElementById(«start_button»).style.BackgroundImage = «url(‘https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png ‘)»
}
Ответ №2:
Проблема в вашем коде заключается в том, что условие внутри оператора if не меняется каждый раз, когда вы нажимаете кнопку. Вам нужен какой-то переключатель, который меняется при каждом нажатии. Вы можете попробовать что-то вроде этого:
const startButton = document.getElementById("start_button");
let startButtonOpen = false;
function startpress() {
startButtonOpen = !startButtonOpen;
if (startButtonOpen) {
startButton.style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')";
} else {
startButton.style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')";
}
}
Комментарии:
1. Изначально это не работало, но небольшая настройка и изменение const на var, похоже, сработали. Но по какой-то причине работал ТОЛЬКО с моим оригинальным оператором if без части «else». Почему? У меня нет diea. В любом случае, решение, которое у меня сейчас есть, — это jank has hell, но я, вероятно, найду время, чтобы сделать его более чистым. Большое спасибо за то, что потратили мои часы времени на решение этой проблемы! <3
Ответ №3:
Вот решение проблемы, которую я, наконец, нашел время для решения.
Итак, для панели задач у меня есть это, которое просто переключается между true и false наряду с адресом заголовка окна и панели задач.
function tumblrtoggle() { pyroButtonOpen = true;
if (tumblrButtonOpen == false) { inactiveall(); tumblrButtonOpen = true;
document.getElementById("post").style.zIndex = (currentno = currentno 1); currentno = currentno 1;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791328235451318342/title-bar_postheaderinactive.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789420847604564008/Taskbar_application1.png')";
} else if (pyroButtonOpen == true){ inactiveall(); tumblrButtonOpen = false;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791321110750298162/title-bar_postheader.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789416557692452884/Taskbar_application.png')";}}
И наличие этого еще где-то в html, поэтому вам не нужно продолжать вызывать «true» для каждого окна, если у вас их несколько.
function inactiveall() {
tumblrButtonOpen = true;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791328235451318342/title-bar_postheaderinactive.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789420847604564008/Taskbar_application1.png')";
}
Затем, чтобы фактически создать сценарий для окна, когда на окно нажимают;
function tumblractive() { tumblrButtonOpen = false;
document.getElementById("post").style.zIndex = (currentno = currentno 1); currentno = currentno 1;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791321110750298162/title-bar_postheader.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789416557692452884/Taskbar_application.png')";
}
Здесь используется пример; https://thealonic.tumblr.com / (все окна используют одни и те же скрипты с разными именами и изменениями для разной функциональности)