Web前端jQuery实现监控大屏数字滚动

HTML代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数字滚动</title><link rel="stylesheet" href="rollNum.css"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head><body><div class="num-box"><div class="num-1" id="num1"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div><div class="num-2" id="num2"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>，<div class="num-3" id="num3"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div><div class="num-4" id="num4"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div><div class="num-5" id="num5"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div></div><script>$(function () {var num1 = document.getElementById('num1')var num2 = document.getElementById('num2')var num3 = document.getElementById('num3')var num4 = document.getElementById('num4')var num5 = document.getElementById('num5')function rolldown(...dom) {dom.forEach((item, index) => {$(item.dom).animate({scrollTop: (item.number * 50) - $(item.dom).scrollTop()}, 500)})}setInterval(() => {var random = Math.floor(Math.random() * 99999)if (random >= 0 && random < 10) { // 个rolldown({dom:num1,number:0,speed: 5},{dom:num2,number:0,speed: 5},{dom:num3,number:0,speed: 8},{dom:num4,number:0,speed: 5},{dom:num5,number:random,speed: 3})}else if (random < 100 && random >= 10) { // 十rolldown({dom:num1,number:0,speed: 5},{dom:num2,number:0,speed: 5},{dom:num3,number:0,speed: 8},{dom:num4,number:random.toString().substring(0,1),speed: 5},{dom:num5,number:random.toString().substring(1,2),speed: 3})}else if (random < 1000 && random >= 100) { // 百rolldown({dom:num1,number:0,speed: 5},{dom:num2,number:0,speed: 5},{dom:num3,number:random.toString().substring(0,1),speed: 8},{dom:num4,number:random.toString().substring(1,2),speed: 5},{dom:num5,number:random.toString().substring(2,3),speed: 3})}else if (random < 10000 && random >= 1000) { // 千rolldown({dom:num1,number:0,speed: 5},{dom:num2,number:random.toString().substring(0,1),speed: 5},{dom:num3,number:random.toString().substring(1,2),speed: 8},{dom:num4,number:random.toString().substring(2,3),speed: 5},{dom:num5,number:random.toString().substring(3,4),speed: 3})}else if (random < 100000 && random >= 10000) { // 万rolldown({dom:num1,number:random.toString().substring(0,1),speed: 5},{dom:num2,number:random.toString().substring(1,2),speed: 5},{dom:num3,number:random.toString().substring(2,3),speed: 8},{dom:num4,number:random.toString().substring(3,4),speed: 5},{dom:num5,number:random.toString().substring(4,5),speed: 3})}}, 2000);})</script></body></html>

css代码：

.num-box{width: 500px;height: 50px;font-size: 50px;line-height: 50px;overflow: hidden;display: flex;background-color: rgb(0, 7, 137);color: white;
}
::-webkit-scrollbar {width: 0 !important;
}
.num-box {-ms-overflow-style: none;overflow: -moz-scrollbars-none;
}
.num-1,.num-2,.num-3,.num-4,.num-5{/* background-color: yellowgreen; *//* border: 2px solid rgb(255, 255, 255); */overflow: auto;margin: 0 auto;
}

Web前端jQuery实现监控大屏数字滚动相关推荐

html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 思路在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤, ...
如何实现大屏数字滚动效果
效果: 思路: 简述:将数字按数组存,比如原来数字是2655,转为数组就是[2,6,5,5],然后循环这个数组,每个数组又创建了1-9数字,再根据数组的值来移动数字的位置具体:我是用vue来写的,但 ...
原生js实现大屏数字上下滚动效果，支持随机多位数字
一文看懂大屏数字滚动前言一.html 二.js生成展示的元素三.css实现样式四.加入动画和定时器前言在大屏项目中经常需要实现那种数字上下滚动的效果,普通的数字随机滚动在UI组件(例如Vi ...
别人家的防疫实时监控大屏是怎么做的？方法和技巧都在这里了
复工返学高峰季是疫情防控的要紧时期,引起了全国企业和高校的高度重视.不少公司和学校将信息化手段应用到了防疫工作中,数字大屏可以用做防疫数据监控的前端平台,也能通过数据展示警醒大家不可放松警惕,在防疫数 ...
HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-2设计与实现
疫情期间,各类应用系统.大数据系统为防疫抗疫带来了巨大助力.国家博物馆首次将代码列为藏品,那就是抗击疫情期间来自阿里程序员写的健康码第一行代码以及研发人员的签名.这展现了广大程序员在疫情面前,争当勇敢 ...
【云驻共创】华为云之手把手教你搭建IoT物联网应用充电桩实时监控大屏
文章目录前言 1.什么是充电桩 2.什么是IOT 3.什么是端.边.云.应用协同 4.什么是Astro轻应用一.玩转lOT动态实时大屏(线下实际操作) 1.Astro轻应用说明 1.1 场景说明 ...
大促中为什么需要可视化监控大屏？
云妹导读: 大数据时代,我们最常听到的一句话就是"用数据说话".但数据本身都是冰冷的数字,它很难直接告诉我们哪些数据是有价值的信息.只有把相对复杂.抽象的数据通过可视的方式以人们更 ...
网页无插件播放265/264视频/监控大屏/GPU解码
网页无插件播放265/264视频/监控大屏/GPU解码先看效果特点 GPU解码,chrome网页播放32路 h256/hevc 直播视频流,毫无压力. 提供1分屏.4分屏.8分屏.9分屏.16分屏 ...
HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-1快速上手
1 ECharts简介 ECharts是一款开源的基于JavaScript的数据可视化图表库,可以流畅地运行在PC和移动设备上,兼容当前绝大多数浏览器.它底层依赖矢量图形库ZRender,支持超过1 ...

Web前端jQuery实现监控大屏数字滚动

Web前端jQuery实现监控大屏数字滚动相关推荐

最新文章

热门文章