Как реализовать переключение случайных чисел в js
Предисловие
На некоторых веб-сайтах электронной коммерции или страницах мероприятий вы можете увидеть некоторые специальные эффекты, такие как: во время лотереи нажмите на изображение, чтобы добиться случайного переключения изображений, случайного переключения чисел и т. д. Чтобы привлечь внимание пользователя и повысить интерактивность веб-страницы. Как достигается этот эффект?
01
Конкретные примеры
https://coder.itclan.cn/fontend/js/14-click-num-suiji/
02
Случайное переключение кодов изображений
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Нажмите на картинку, чтобы переключиться случайным образом</title>
<style>
* {
padding:0;
margin:0
}
#wrap{
width:420px;
height:531px;
margin:auto;
border:1px solid #000;
text-align: center;
cursor: pointer
}
</style>
</head>
<body>
<div id="wrap">
<img src="images/1.jpg" alt="" width="100%" height="100%">
</div>
<script>
var index = 0;
var oWrap = document.getElementById('wrap');
var timer = null; // определить таймер
var onOff = true; // кнопка переключения
play();
function play(){
timer = setInterval(function(){
index++;
if(index>10){
index = 1;
}
document.querySelector("img").src="images/"+index+".jpg"
},100);
}
// операции с событиями
oWrap.onclick = function(){
if(onOff){
clearInterval(timer); // Прозрачныйтаймер }else{
play();
}
onOff = !onOff;
}
</script>
</body>
</html>Случайное переключение изображений на самом деле означает переключение источника изображения img. Конечно, изображения также можно хранить в массиве. Выше я поместил несколько изображений в папку изображений.
Он реализуется через относительные пути. Код таймера выше также можно реализовать с помощью цикла for.
Чтобы добиться такого эффекта, нужно использовать таймер. При нажатии на картинку для ее отображения и паузы необходимо использовать кнопку переключения.
03
Реализовать переключение случайных чисел
Конкретный код выглядит следующим образом: После использования собственного метода js вы можете использовать vue или другие платформы для достижения того же эффекта. Реализация основного кода остается неизменной.
<template>
<div id="wrap">
<p class="text" :style="{color}">{{num}}</p>
<p>
<el-button :type="onOff == true?'primary':'danger'" @click="handleBtnCLick">{{onOff ==true?'пауза':'начинать'}}</el-button>
</p>
</div>
</template>
<script>
export default {
name:"clickimgSuiji",
data() {
return {
num: 0,
numbers: [],
timer: null,
onOff: true, // выключатель
color: "red"
}
},
mounted() {
this.addNum();
this.randomNum();
},
methods: {
addNum() {
for(let i = 1;i<=100;i++) {
this.numbers.push(i)
}
},
randomNum() {
this.timer = setInterval(() => {
// Определите функцию random(). Принцип таков. Умножьте случайное число на разницу между максимальным значением и минимальным значением. Наконец добавьте минимальное значение
// Math.floor(Math.random() * (max - min)) + min
this.num = Math.floor(Math.random() * (this.numbers.length - 1)) + 1
},100)
},
handleBtnCLick() {
if(this.onOff) {
this.color="#000";
clearInterval(this.timer); // Прозрачныйтаймер }else {
this.color="red";
this.randomNum();
}
this.onOff = !this.onOff;
}
}
}
</script>
<style lang="scss" scoped>
#wrap{
text-align: center;
}
.text {
font-size: 20px;
font-weight: bold;
}
</style>Важные моменты знаний
Вышеупомянутое реализует генерацию случайных чисел и генерирует случайные числа в определенном диапазоне значений.
Определите функцию random(). Принцип состоит в том, чтобы умножить случайное число на разницу между максимальным и минимальным значением и, наконец, добавить минимальное значение.
Среди них числа с плавающей запятой Math.floor() округляются в меньшую сторону.
Math.floor(Math.random() * (max - min)) + minВсе остальное такое же, как и в собственной реализации js. Он также использует таймер и добавляет переключатель для его реализации.
Углубленный анализ переполнения памяти CUDA: OutOfMemoryError: CUDA не хватает памяти. Попыталась выделить 3,21 Ги Б (GPU 0; всего 8,00 Ги Б).
[Решено] ошибка установки conda. Среда решения: не удалось выполнить первоначальное зависание. Повторная попытка с помощью файла (графическое руководство).
Прочитайте нейросетевую модель Трансформера в одной статье
.ART Теплые зимние предложения уже открыты
Сравнительная таблица описания кодов ошибок Amap
Уведомление о последних правилах Points Mall в декабре 2022 года.
Даже новички могут быстро приступить к работе с легким сервером приложений.
Взгляд на RSAC 2024｜Защита конфиденциальности в эпоху больших моделей
Вы используете ИИ каждый день и до сих пор не знаете, как ИИ дает обратную связь? Одна статья для понимания реализации в коде Python общих функций потерь генеративных моделей + анализ принципов расчета.
Используйте (внутренний) почтовый ящик для образовательных учреждений, чтобы использовать Microsoft Family Bucket (1T дискового пространства на одном диске и версию Office 365 для образовательных учреждений)
Руководство по началу работы с оперативным проектом (7) Практическое сочетание оперативного письма — оперативного письма на основе интеллектуальной системы вопросов и ответов службы поддержки клиентов
[docker] Версия сервера «Чтение 3» — создайте свою собственную программу чтения веб-текста
Обзор Cloud-init и этапы создания в рамках PVE
Корпоративные пользователи используют пакет регистрационных ресурсов для регистрации ICP для веб-сайта и активации оплаты WeChat H5 (с кодом платежного узла версии API V3)
Подробное объяснение таких показателей производительности с высоким уровнем параллелизма, как QPS, TPS, RT и пропускная способность.
Удачи в конкурсе Python Essay Challenge, станьте первым, кто испытает новую функцию сообщества [Запускать блоки кода онлайн] и выиграйте множество изысканных подарков!
[Техническая посадка травы] Кровавая рвота и отделка позволяют вам необычным образом ощипывать гусиные перья! Не распространяйте информацию! ! !
[Официальное ограниченное по времени мероприятие] Сейчас ноябрь, напишите и получите приз
Прочтите это в одной статье: Учебник для няни по созданию сервера Huanshou Parlu на базе CVM-сервера.
Cloud Native | Что такое CRD (настраиваемые определения ресурсов) в K8s?
Как использовать Cloudflare CDN для настройки узла (CF самостоятельно выбирает IP) Гонконг, Китай/Азия узел/сводка и рекомендации внутреннего высокоскоростного IP-сегмента
Дополнительные правила вознаграждения амбассадоров акции в марте 2023 г.
Можно ли открыть частный сервер Phantom Beast Palu одним щелчком мыши? Супер простой урок для начинающих! (Прилагается метод обновления сервера)
[Играйте с Phantom Beast Palu] Обновите игровой сервер Phantom Beast Pallu одним щелчком мыши
Maotouhu делится: последний доступный внутри страны адрес склада исходного образа Docker 2024 года (обновлено 1 декабря)
Кодирование Base64 в MultipartFile
5 точек расширения SpringBoot, супер практично!
Глубокое понимание сопоставления индексов Elasticsearch.
15 рекомендуемых платформ разработки с нулевым кодом корпоративного уровня. Всегда найдется та, которая вам понравится.
