30.06.2022, 21:50
|
Новичок на форуме
|
|
Регистрация: 30.06.2022
Сообщений: 6
|
|
Скрипт смены картинок при нажатии. Добавить смену в обратном порядке при нажатойSHIFT
Подскажите есть такой скрипт
<script>
var squares = [];
var squares_signs = []
function Initialization(){
for (var i = 0; i < 38001; i++){
squares[i] = document.getElementById("square"+i);
}
for (var i = 0; i < 38001; i++){
squares[i].innerHTML = "<img src = 'empty.png'>";
squares_signs[i] = 0;
}
}
function ChangeSign(square_i){
squares[square_i].innerHTML = "<img src = 'circle.png'>";
if (squares_signs[square_i] == 0){
squares[square_i].innerHTML = "<img src = 'circle.png'>";
squares_signs[square_i] = 1;
return;
}
if (squares_signs[square_i] == 1){
squares[square_i].innerHTML = "<img src = 'cross.png'>";
squares_signs[square_i] = 2;
return;
}
if (squares_signs[square_i] == 2){
squares[square_i].innerHTML = "<img src = 'dus.png'>";
squares_signs[square_i] = 3;
return;
}
if (squares_signs[square_i] == 3){
squares[square_i].innerHTML = "<img src = 'puat.png'>";
squares_signs[square_i] = 4;
return;
}
if (squares_signs[square_i] == 4){
squares[square_i].innerHTML = "<img src = 'chest.png'>";
squares_signs[square_i] = 5;
return;
}
if (squares_signs[square_i] == 5){
squares[square_i].innerHTML = "<img src = 'seem.png'>";
squares_signs[square_i] = 6;
return;
}
if (squares_signs[square_i] == 6){
squares[square_i].innerHTML = "<img src = 'voosem.png'>";
squares_signs[square_i] = 7;
return;
}
if (squares_signs[square_i] == 7){
squares[square_i].innerHTML = "<img src = 'deeviat.png'>";
squares_signs[square_i] = 8;
return;
}
if (squares_signs[square_i] == 8){
squares[square_i].innerHTML = "<img src = 'des.png'>";
squares_signs[square_i] = 9;
return;
}
if (squares_signs[square_i] == 9){
squares[square_i].innerHTML = "<img src = 'odincat.png'>";
squares_signs[square_i] = 10;
return;
}
if (squares_signs[square_i] == 10){
squares[square_i].innerHTML = "<img src = 'empty.png'>";
squares_signs[square_i] = 0;
}
}
</script>
html страница где скрипт меняет картинки при нажатии левой кнопкой мыши. Последовательно одну за другой. Можно ли сделать так, чтоб при нажатой клавиши SHIFT и нажимании на мышь картинки менялись в обратном порядке?
Логика такая:
если клавиша шифт не нажата первая переключается на вторую ->3 ->4->5 и так далее до десятой.
если клавиша шифт нажата, то первая переключается на 10 ->9 ->8 ->7 и так далее до первой.
Я вообще не программист, только разбираюсь со всем этим, не принципиально, чтоб была именно клавиша шифт, подойдет любая клавиша на клавиатуре.
|
|
30.06.2022, 22:01
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
что это за магическая цифра?
|
|
30.06.2022, 22:07
|
Новичок на форуме
|
|
Регистрация: 30.06.2022
Сообщений: 6
|
|
Сообщение от рони
|
что это за магическая цифра?
|
Я не знаю, так было. Этот скрипт я скачал 5 лет назад и приспособил для своих задач. Теперь вопрос появился, получится его модернизировать?
|
|
30.06.2022, 22:21
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
sober,
надеюсь вам кто-то поможет ...
|
|
30.06.2022, 22:41
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,790
|
|
sober, это же не полный скрипт?
Где и как вызывается функция ChangeSign?
Давно такого Индусского кода не видел =)
|
|
30.06.2022, 23:01
|
Новичок на форуме
|
|
Регистрация: 30.06.2022
Сообщений: 6
|
|
Сообщение от Nexus
|
sober, это же не полный скрипт?
Где и как вызывается функция ChangeSign?
Давно такого Индусского кода не видел =)
|
Вот только не смейтесь
Полностью страница выглядит так:
<body>
<td class="centerColumn">
<div id="textBlock">
<!-- <body> -->
[css]
<style>
h1{
color:black;
font-family: Palatino Linotype;
}
div{
font-family: Palatino Linotype;
}
#XO{
background-color:#A5DEFF;
position:relative;
width: 400px;
}
div.square{
position:absolute;
height:20px;
width:20px;
cursor:pointer;
}
</style>
[css]
[js]
<script>
var squares = [];
var squares_signs = []
function Initialization(){
for (var i = 0; i < 38001; i++){
squares[i] = document.getElementById("square"+i);
}
for (var i = 0; i < 38001; i++){
squares[i].innerHTML = "<img src = 'empty.png'>";
squares_signs[i] = 0;
}
}
function ChangeSign(square_i){
squares[square_i].innerHTML = "<img src = 'circle.png'>";
if (squares_signs[square_i] == 0){
squares[square_i].innerHTML = "<img src = 'circle.png'>";
squares_signs[square_i] = 1;
return;
}
if (squares_signs[square_i] == 1){
squares[square_i].innerHTML = "<img src = 'cross.png'>";
squares_signs[square_i] = 2;
return;
}
if (squares_signs[square_i] == 2){
squares[square_i].innerHTML = "<img src = 'dus.png'>";
squares_signs[square_i] = 3;
return;
}
if (squares_signs[square_i] == 3){
squares[square_i].innerHTML = "<img src = 'puat.png'>";
squares_signs[square_i] = 4;
return;
}
if (squares_signs[square_i] == 4){
squares[square_i].innerHTML = "<img src = 'chest.png'>";
squares_signs[square_i] = 5;
return;
}
if (squares_signs[square_i] == 5){
squares[square_i].innerHTML = "<img src = 'seem.png'>";
squares_signs[square_i] = 6;
return;
}
if (squares_signs[square_i] == 6){
squares[square_i].innerHTML = "<img src = 'voosem.png'>";
squares_signs[square_i] = 7;
return;
}
if (squares_signs[square_i] == 7){
squares[square_i].innerHTML = "<img src = 'deeviat.png'>";
squares_signs[square_i] = 8;
return;
}
if (squares_signs[square_i] == 8){
squares[square_i].innerHTML = "<img src = 'des.png'>";
squares_signs[square_i] = 9;
return;
}
if (squares_signs[square_i] == 9){
squares[square_i].innerHTML = "<img src = 'odincat.png'>";
squares_signs[square_i] = 10;
return;
}
if (squares_signs[square_i] == 10){
squares[square_i].innerHTML = "<img src = 'empty.png'>";
squares_signs[square_i] = 0;
}
}
</script>
[/js]
<div id = "XO">
<div class="square"id="square0" style = "left:0px; top:0px;" onclick = "ChangeSign(0);"></div>
<div class="square"id="square1" style = "left:15px; top:0px;" onclick = "ChangeSign(1);"></div>
<div class="square"id="square2" style = "left:30px; top:0px;" onclick = "ChangeSign(2);"></div>
<div class="square"id="square3" style = "left:45px; top:0px;" onclick = "ChangeSign(3);"></div>
<div class="square"id="square4" style = "left:60px; top:0px;" onclick = "ChangeSign(4);"></div>
<div class="square"id="square5" style = "left:75px; top:0px;" onclick = "ChangeSign(5);"></div>
<div class="square"id="square6" style = "left:90px; top:0px;" onclick = "ChangeSign(6);"></div>
<div class="square"id="square7" style = "left:105px; top:0px;" onclick = "ChangeSign(7);"></div>
<div class="square"id="square8" style = "left:120px; top:0px;" onclick = "ChangeSign(8);"></div>
<div class="square"id="square9" style = "left:135px; top:0px;" onclick = "ChangeSign(9);"></div>
<div class="square"id="square10" style = "left:150px; top:0px;" onclick = "ChangeSign(10);"></div>
<div class="square"id="square11" style = "left:165px; top:0px;" onclick = "ChangeSign(11);"></div>
<div class="square"id="square12" style = "left:180px; top:0px;" onclick = "ChangeSign(12);"></div>
<div class="square"id="square13" style = "left:195px; top:0px;" onclick = "ChangeSign(13);"></div>
<div class="square"id="square14" style = "left:210px; top:0px;" onclick = "ChangeSign(14);"></div>
<div class="square"id="square15" style = "left:225px; top:0px;" onclick = "ChangeSign(15);"></div>
<div class="square"id="square16" style = "left:240px; top:0px;" onclick = "ChangeSign(16);"></div>
<div class="square"id="square17" style = "left:255px; top:0px;" onclick = "ChangeSign(17);"></div>
<div class="square"id="square18" style = "left:270px; top:0px;" onclick = "ChangeSign(18);"></div>
<div class="square"id="square19" style = "left:285px; top:0px;" onclick = "ChangeSign(19);"></div>
<div class="square"id="square20" style = "left:300px; top:0px;" onclick = "ChangeSign(20);"></div>
<div class="square"id="square21" style = "left:315px; top:0px;" onclick = "ChangeSign(21);"></div>
<div class="square"id="square22" style = "left:330px; top:0px;" onclick = "ChangeSign(22);"></div>
<div class="square"id="square23" style = "left:345px; top:0px;" onclick = "ChangeSign(23);"></div>
<div class="square"id="square24" style = "left:360px; top:0px;" onclick = "ChangeSign(24);"></div>
<div class="square"id="square25" style = "left:375px; top:0px;" onclick = "ChangeSign(25);"></div>
<div class="square"id="square26" style = "left:390px; top:0px;" onclick = "ChangeSign(26);"></div>
<div class="square"id="square27" style = "left:405px; top:0px;" onclick = "ChangeSign(27);"></div>
<div class="square"id="square28" style = "left:420px; top:0px;" onclick = "ChangeSign(28);"></div>
<div class="square"id="square29" style = "left:435px; top:0px;" onclick = "ChangeSign(29);"></div>
<div class="square"id="square30" style = "left:450px; top:0px;" onclick = "ChangeSign(30);"></div>
<div class="square"id="square31" style = "left:465px; top:0px;" onclick = "ChangeSign(31);"></div>
<div class="square"id="square32" style = "left:480px; top:0px;" onclick = "ChangeSign(32);"></div>
<div class="square"id="square33" style = "left:495px; top:0px;" onclick = "ChangeSign(33);"></div>
<div class="square"id="square34" style = "left:510px; top:0px;" onclick = "ChangeSign(34);"></div>
<div class="square"id="square35" style = "left:525px; top:0px;" onclick = "ChangeSign(35);"></div>
<div class="square"id="square36" style = "left:540px; top:0px;" onclick = "ChangeSign(36);"></div>
<div class="square"id="square37" style = "left:555px; top:0px;" onclick = "ChangeSign(37);"></div>
<div class="square"id="square38" style = "left:570px; top:0px;" onclick = "ChangeSign(38);"></div>
<div class="square"id="square39" style = "left:585px; top:0px;" onclick = "ChangeSign(39);"></div>
<div class="square"id="square40" style = "left:600px; top:0px;" onclick = "ChangeSign(40);"></div>
<div class="square"id="square41" style = "left:615px; top:0px;" onclick = "ChangeSign(41);"></div>
<div class="square"id="square42" style = "left:630px; top:0px;" onclick = "ChangeSign(42);"></div>
<div class="square"id="square43" style = "left:645px; top:0px;" onclick = "ChangeSign(43);"></div>
<div class="square"id="square44" style = "left:660px; top:0px;" onclick = "ChangeSign(44);"></div>
<div class="square"id="square45" style = "left:675px; top:0px;" onclick = "ChangeSign(45);"></div>
<div class="square"id="square46" style = "left:690px; top:0px;" onclick = "ChangeSign(46);"></div>
<div class="square"id="square47" style = "left:705px; top:0px;" onclick = "ChangeSign(47);"></div>
<div class="square"id="square48" style = "left:720px; top:0px;" onclick = "ChangeSign(48);"></div>
<div class="square"id="square49" style = "left:735px; top:0px;" onclick = "ChangeSign(49);"></div>
<div class="square"id="square50" style = "left:750px; top:0px;" onclick = "ChangeSign(50);"></div>
</div>
<script>
Initialization();
</script><!-- </body> -->
</div>
</td>
</body>
Последний раз редактировалось sober, 30.06.2022 в 23:58.
|
|
30.06.2022, 23:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
sober,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
01.07.2022, 01:03
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,790
|
|
Сообщение от sober
|
Вот только не смейтесь
|
На самом деле ничего смешного то тут и нет.
У вас в разметке (в HTML) ошибка есть: тэг td находится внутри тэга body, а должен быть непосредственно (должен быть прямым потомком) в тэге tr, который в свою очередь должен быть прямым потомком тэга table.
Я переделал ваш скрипт, результат можно посмотреть тут: https://codesandbox.io/s/sharp-brown...=/src/index.js
Или тут:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<meta charset="UTF-8" />
<style>
h1 {
color: black;
font-family: Palatino Linotype;
}
div {
font-family: Palatino Linotype;
}
#XO {
background-color: #a5deff;
position: relative;
width: 400px;
}
div.square {
position: absolute;
height: 20px;
width: 20px;
cursor: pointer;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const SQARES_NUMBER = 51;
const HORISONTAL_STEP_PX = 15;
const VERTICAL_STEP_PX = 0;
const DECREASE_KEY = "Shift";
const DEFAULT_SQUARE_IMAGE = "https://fakeimg.pl/20x20/?text=0&font_size=20";
const SQUARE_IMAGES = [
"https://fakeimg.pl/20x20/?text=1&font_size=20",
"https://fakeimg.pl/20x20/?text=2&font_size=20",
"https://fakeimg.pl/20x20/?text=3&font_size=20",
"https://fakeimg.pl/20x20/?text=4&font_size=20",
"https://fakeimg.pl/20x20/?text=5&font_size=20",
"https://fakeimg.pl/20x20/?text=6&font_size=20",
"https://fakeimg.pl/20x20/?text=7&font_size=20",
"https://fakeimg.pl/20x20/?text=8&font_size=20",
"https://fakeimg.pl/20x20/?text=9&font_size=20",
"https://fakeimg.pl/20x20/?text=10&font_size=20",
DEFAULT_SQUARE_IMAGE
];
const container = document.querySelector(".squares-container-js");
if (!container) {
throw new Error(
"Element with [.squares-container-js] selector not found"
);
}
container.innerHTML = "";
for (let i = 0; i < SQARES_NUMBER; i++) {
const square = document.createElement("div");
square.className = "square square-js";
square.id = "square" + i;
square.style.left = HORISONTAL_STEP_PX * i + "px";
square.style.top = VERTICAL_STEP_PX * i + "px";
square.dataset.imageIndex = -1;
const squareImage = document.createElement("img");
squareImage.src = DEFAULT_SQUARE_IMAGE;
square.appendChild(squareImage);
container.appendChild(square);
}
let shouldBeDecreased = false;
document.addEventListener("keydown", function (e) {
shouldBeDecreased = shouldBeDecreased || e.key === DECREASE_KEY;
});
document.addEventListener("keyup", function (e) {
if (shouldBeDecreased && e.key === DECREASE_KEY) {
shouldBeDecreased = false;
}
});
container.addEventListener("click", function (e) {
let target = e.target;
const selector = ".square-js";
if (!target) {
return;
}
if (!target.matches(selector)) {
target = target.closest(selector);
if (!target) {
return;
}
}
const currentImageIndex = +(target.dataset.imageIndex || 0);
const step = shouldBeDecreased ? -1 : 1;
let newImageIndex = (currentImageIndex + step) % SQUARE_IMAGES.length;
if (newImageIndex < 0) {
newImageIndex += SQUARE_IMAGES.length;
}
target.dataset.imageIndex = newImageIndex;
target.querySelector("img").src = SQUARE_IMAGES[newImageIndex];
});
});
if (document.readyState === "complete") {
document.dispatchEvent(new Event("DOMContentLoaded"));
}
</script>
</head>
<body>
<div class="centerColumn">
<div id="textBlock">
<div id="XO" class="squares-container-js">
Loading...
</div>
</div>
</div>
</body>
</html>
Последний раз редактировалось Nexus, 01.07.2022 в 01:14.
|
|
01.07.2022, 01:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#XO {
background-color: #A5DEFF;
display: flex;
}
div.square {
height: 100px;
width: 100px;
cursor: pointer;
}
div.square img {
height: 100px;
width: 100px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let elem = document.querySelector("#XO");
let src = ["https://via.placeholder.com/150/0000FF/FFFFFF/?text=+empty", //заменить на свои ссылки 'empty.png' и т.д.
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+circle",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+cross",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+dus",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+puat",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+chest",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+seem",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+voosem",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+deeviat",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+des",
"https://via.placeholder.com/150/0000FF/FFFFFF/?text=+odincat"
];
let len = src.length;
let num = 51;//сколько блоков создать
let arr = Array.from({
length: num
}, v => `<div class="square" data-index="0"><img src = '${src[0]}'></div>`)
elem.insertAdjacentHTML("beforeend", arr.join(''));
let up = 1;
document.addEventListener("keydown", function(e) {
if (e.shiftKey) up = -1;
})
document.addEventListener("keyup", function(e) {
up = 1;
})
elem.addEventListener("click", function({
target
}) {
if (target = target.closest(".square")) {
let index = +target.dataset.index;
index = (index + len + up) % len;
target.dataset.index = index;
target.querySelector("img").src = src[index];
};
})
})
</script>
</head>
<body>
<div id="XO"></div>
</body>
</html>
|
|
01.07.2022, 01:32
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,790
|
|
рони, 54-я строка - крутое решение, я до такого не додумался)
Что element.closest может еще и "себя" вернуть не знал.
Вы избавились от абсолютного позиционирования блоков .square, считаете, что ТС оно может быть вовсе не нужно?
|
|
|
|