24.07.2023, 23:51
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,111
|
|
|
Сообщение от sayman100
|
|
а как выставить 10 разных слов без повторений? я уже запутался )
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
position: relative;
}
.roulette-inner div {
width: 72px;
height: 72px;
margin: 2px;
border: 1px solid #0000FF;
text-align: center;
line-height: 72px;
}
.roulette-inner div.active {
border: 2px solid rgba(89, 0, 153, .2);
box-sizing: border-box;
border-radius: 50%;
padding: -4px 4px 2px 4px;
transform: scale(1.7);
z-index: 1000;
background-color: rgba(0, 255, 127, .5);
}
.roulette-inner div.active:after{
content: ' click me';
}
.roulette {
overflow: hidden;
height: 126px;
width: 532px;
border: 3px solid #8B4513;
}
.roulette-inner {
position: relative;
top: 24px;
width: 17000px;
display: flex;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery.easing['easeInOutQuart'] = function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
$(function() {
var k = 45,
n = 7,
w = 76; //количество картинок , сколько показывать , ширина картинки
let word = 'а как выставить 10 разных слов без повторений? я уже запутался )'.split(' ');
k = word.length;
for (let i = 0; i < k; i++) {
$("<div>", {
text: word[i],
click: function() {
if (this.classList.contains('active')) alert(i)
}
}).appendTo(".roulette-inner");
}
for (let i = 0; i < k; i++) {
$("<div>", {
text: word[i],
click: function() {
if (this.classList.contains('active')) alert(i)
}
}).appendTo(".roulette-inner");
}
$(".roulette").width(n * w);
$(".roulette-inner").width(2 * k * w + w)
var option = {
speed: 5,
duration: 3,
stopImageNumber: 0
};
var old = 0;
$("#go").click(function() {
option.stopImageNumber = Math.random() * k | 0;
$(".roulette-inner div").removeClass("active");
$("#config").text(JSON.stringify(option));
$({
left: old * w
}).animate({
left: (k * w) * option.speed + w * (option.stopImageNumber + (k - Math.floor(n / 2)))
}, {
duration: option.duration * 1000,
easing: "easeInOutQuart",
step: function(a) {
$(".roulette-inner").css("transform", "translateX(-" + a % (k * w) + "px)");
},
complete: function() {
old = option.stopImageNumber + (option.stopImageNumber < Math.floor(n / 2)) * k
$(".roulette-inner div").eq(old).addClass("active");
old = option.stopImageNumber + (k - Math.floor(n / 2))
}
});
})
});
</script>
</head>
<body>
<h2>Config: <span id="config"></span></h2>
<div class="roulette">
<div class="roulette-inner">
</div>
</div>
<button id="go">Go</button>
</body>
</html>
|
|
25.07.2023, 00:33
|
|
Интересующийся
|
|
Регистрация: 21.07.2023
Сообщений: 13
|
|
|
То что надо, спасибо
|
|
26.07.2023, 20:40
|
|
Интересующийся
|
|
Регистрация: 21.07.2023
Сообщений: 13
|
|
|
Запуск скрипта после загрузки сайта
<!DOCTYPE html>
<html>
<body>
<style>
.XXX {width: 70px; height: 100px; border: 1px solid red; overflow:hidden;float:left}
.X {font-size:70px;width:100%;text-align:center; height:80px;}/* << вот тут 80!!!*/
</style>
<div id='xxx1' class='XXX'>
<div class='X'>1</div> <!-- а вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div>
</div>
<input type='button' onclick='LetsGo()' value='Старт'>
<script>
var oneHeight=80, // размер одного элемента
numImage=10, // количество элементов
speedStep=0.2; // скорость изменения скорости
function LetsGo(){
clearInterval(LetsGo.interval);
var x=[];
for(var i in{xxx1:1}){
var ob=5+Math.floor(Math.random()*6), // количество оборотов 5 минимум, 10 - максимум
nn=Math.random()*numImage;
num=Math.floor(nn), // выигравший нумер
o={
ob:ob,num:num,
a:document.getElementById(i), // это наш контрол с классом XXX
// время=(speedStart)/speedStep
// расстояние=(speedStart/2)*время -арифм прогр
// расстояние=speedStart^2/(2*speedStep)
// speedStart=sqrt(расстояние*2*speedStep)
speed:Math.sqrt(((ob*numImage+num)* oneHeight)* speedStep*2), // скорость
scr:-26 // магия, блин
}; // выигравший номер
x.push(o);
}
LetsGo.interval=setInterval(
function (){
var i = x.length,complete=true;
while(i--){
var a=x[i];
a.scr+=a.speed;
if(a.speed>2*speedStep){
a.speed-=speedStep;complete=false;
} else if(a.speed>0) {
var t= Math.round(a.scr / oneHeight);
if(t>=numImage) t=0;
console.log(i,t,a.scr-oneHeight*t,a.ob,a.num);
a.scr=oneHeight*t;
a.speed=0;
complete=false;
}
if(a.scr>(oneHeight*numImage))
a.scr-=oneHeight*numImage;
a.a.scrollTop=Math.floor(a.scr);
}
if(complete) clearInterval(LetsGo.interval)
},20)
}
</script>
</body>
</html>
Ребят, а как сделать чтобы данный скрипт загружался только после прогрузки всего сайта, либо с отсрочкой допустим через 5 сек, пытаюсь добавить значение
window.onload = function() {
// Скрипт
};
но скрипт перестает работать, как быть?
|
|
26.07.2023, 21:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,111
|
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
|
26.07.2023, 21:45
|
|
Интересующийся
|
|
Регистрация: 21.07.2023
Сообщений: 13
|
|
|
Запуск скрипта после полной загрузки страницы
<!DOCTYPE html>
<html>
<body>
<style>
.XXX {width: 70px; height: 100px; border: 1px solid red; overflow:hidden;float:left}
.X {font-size:70px;width:100%;text-align:center; height:80px;}/* << вот тут 80!!!*/
</style>
<div id='xxx1' class='XXX'>
<div class='X'>1</div> <!-- а вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div>
</div>
<input type='button' onclick='LetsGo()' value='Старт'>
<script>
var oneHeight=80, // размер одного элемента
numImage=10, // количество элементов
speedStep=0.2; // скорость изменения скорости
function LetsGo(){
clearInterval(LetsGo.interval);
var x=[];
for(var i in{xxx1:1}){
var ob=5+Math.floor(Math.random()*6), // количество оборотов 5 минимум, 10 - максимум
nn=Math.random()*numImage;
num=Math.floor(nn), // выигравший нумер
o={
ob:ob,num:num,
a:document.getElementById(i), // это наш контрол с классом XXX
// время=(speedStart)/speedStep
// расстояние=(speedStart/2)*время -арифм прогр
// расстояние=speedStart^2/(2*speedStep)
// speedStart=sqrt(расстояние*2*speedStep)
speed:Math.sqrt(((ob*numImage+num)* oneHeight)* speedStep*2), // скорость
scr:-26 // магия, блин
}; // выигравший номер
x.push(o);
}
LetsGo.interval=setInterval(
function (){
var i = x.length,complete=true;
while(i--){
var a=x[i];
a.scr+=a.speed;
if(a.speed>2*speedStep){
a.speed-=speedStep;complete=false;
} else if(a.speed>0) {
var t= Math.round(a.scr / oneHeight);
if(t>=numImage) t=0;
console.log(i,t,a.scr-oneHeight*t,a.ob,a.num);
a.scr=oneHeight*t;
a.speed=0;
complete=false;
}
if(a.scr>(oneHeight*numImage))
a.scr-=oneHeight*numImage;
a.a.scrollTop=Math.floor(a.scr);
}
if(complete) clearInterval(LetsGo.interval)
},20)
}
</script>
</body>
</html>
Ребят, а как сделать чтобы данный скрипт загружался только после прогрузки всего сайта, либо с отсрочкой допустим через 5 сек, пытаюсь добавить значение
window.onload = function() {
// Скрипт
};
но скрипт перестает работать, как быть?
|
|
26.07.2023, 22:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,111
|
|
|
Сообщение от sayman100
|
|
с отсрочкой допустим через 5 сек
|
<!DOCTYPE html>
<html>
<body>
<style>
.XXX {
width: 70px;
height: 100px;
border: 1px solid red;
overflow: hidden;
float: left
}
.X {
font-size: 70px;
width: 100%;
text-align: center;
height: 80px;
}
/* << вот тут 80!!!*/
</style>
<div id='xxx1' class='XXX'>
<div class='X'>1</div>
<!-- а вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div>
</div>
<input type='button' onclick='LetsGo()' value='Старт'>
<script>
var oneHeight = 80, // размер одного элемента
numImage = 10, // количество элементов
speedStep = 0.2; // скорость изменения скорости
function LetsGo() {
clearInterval(LetsGo.interval);
var x = [];
for (var i in {
xxx1: 1
}) {
var ob = 5 + Math.floor(Math.random() * 6), // количество оборотов 5 минимум, 10 - максимум
nn = Math.random() * numImage;
num = Math.floor(nn), // выигравший нумер
o = {
ob: ob,
num: num,
a: document.getElementById(i), // это наш контрол с классом XXX
// время=(speedStart)/speedStep
// расстояние=(speedStart/2)*время -арифм прогр
// расстояние=speedStart^2/(2*speedStep)
// speedStart=sqrt(расстояние*2*speedStep)
speed: Math.sqrt(((ob * numImage + num) * oneHeight) * speedStep * 2), // скорость
scr: -26 // магия, блин
}; // выигравший номер
x.push(o);
}
LetsGo.interval = setInterval(
function() {
var i = x.length,
complete = true;
while (i--) {
var a = x[i];
a.scr += a.speed;
if (a.speed > 2 * speedStep) {
a.speed -= speedStep;
complete = false;
} else if (a.speed > 0) {
var t = Math.round(a.scr / oneHeight);
if (t >= numImage) t = 0;
console.log(i, t, a.scr - oneHeight * t, a.ob, a.num);
a.scr = oneHeight * t;
a.speed = 0;
complete = false;
}
if (a.scr > (oneHeight * numImage))
a.scr -= oneHeight * numImage;
a.a.scrollTop = Math.floor(a.scr);
}
if (complete) clearInterval(LetsGo.interval)
}, 20)
}
window.onload = function() {
window.setTimeout(LetsGo, 5000)
};
</script>
</body>
</html>
|
|
27.07.2023, 00:32
|
|
Интересующийся
|
|
Регистрация: 21.07.2023
Сообщений: 13
|
|
|
Объединение скриптов
Немного не то, тут скрипт автоматически срабатывает через 5 сек, мне это не нужно, мне нужно что бы весь скрипт загружался последним, сначала весь сайт загрузился, а только потом этот скрипт! Функция window.onload = function() {}; на других скриптах работает отлично, но не с этим, на этом не работает, скрипт грузится одновременно со всем сайтом. Дело в том, что у меня к кнопке данного скрипта привязан другой скрипт, который отвечает за количество нажатий на кнопку и он хранит количество нажатий в кеше, в итоге при обновлении страницы сайта, кнопка подгружает из кеша данные о количестве нажатий и если лимит нажатий исчерпан, кнопка подгружает сохраненные данные и в этот момент нажимается сама вызывая тем самым прокрутку скрипта выше.
Ниже прикреплю скрипт самой кнопки, подскажите как их грамотно объединить
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$.fn.Timer = function Timer(obj) {
var def = {
from: 5E3,
duration: 5E3,
to: 0,
callback: null,
step: function(now, fx) {
$(fx.elem).html(now | 0)
}
};
var opt = $.extend({}, def, obj);
return this.each(function(indx, el) {
$(el).queue(function() {
el.n = opt.from;
$(el).dequeue()
});
$(el).animate({
n: opt.to
}, {
easing: "linear",
duration: opt.duration,
step: opt.step,
complete: opt.callback
})
})
};
var end66 = +localStorage.getItem("end66") || 0,
duration = 10 * 1E3;
var num66 = +localStorage.getItem("num66") || 0;
var max = 10;
$("#send_sms").on("click", function(event) {
num66++;
localStorage.setItem("num66", num66);
this.textContent = `КРУТИТЬ РУЛЕТКУ ОСТАЛОСЬ ${max - num66}`;
if (num66 < max) return;
var time = (new Date).getTime(),
d = duration;
if (end66 && end66 > time) {
event.stopPropagation();
d = end66 - time;
} else {
localStorage.setItem("end66", time + duration);
}
var f = d / 1000 | 0;
var text = this.defaultValue;
$(this).prop({
disabled: true
}).Timer({
step: function(now, fx) {
var a = Math.trunc(now);
var b = ['секунда', 'секунды', 'секунд'];
a = `${a} ${b[1 == a % 10 && 11 != a % 100 ? 0 : 2 <= a % 10 && 4 >= a % 10 && (10 > a % 100 || 20 <= a % 100) ? 1 : 2]}`;
fx.elem.textContent = `ЛИМИТ ЗАКОНЧИЛСЯ`;
},
from: f,
duration: d,
to: 0,
callback: function() {
localStorage.setItem("end66", "0");
localStorage.setItem("num66", "0");
num66 = 0;
$(this).prop({
disabled: false
}).text("КРУТИТЬ РУЛЕТКУ");
}
})
})
if (end66) $("#send_sms").click();
});
</script>
</head>
<body>
<button class="button" id="send_sms" name="send_sms" type="button" onclick='LetsGo()'>Старт</button>
</body>
</html>
|
|
|
|
