首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS将背景位置设置为数组中的随机数

是一种常见的前端开发技巧,用于实现动态背景效果。通过将背景图片的位置设置为一个包含不同位置的数组,并使用Math.random()函数生成一个随机索引值,可以实现在每次页面加载或触发事件时,随机改变背景图片位置的效果。

这种技巧主要利用了CSS的background-position属性来设置背景图片的位置。通过JS生成的随机数作为数组的索引,可以从数组中取得一个随机的背景图片位置值,然后将该值应用到相应的元素的背景样式上。

这种技巧适用于需要为网页或特定元素添加一些动态效果的场景,例如轮播图、背景图切换等。通过随机选择背景图片的位置,可以为用户带来更丰富多样的视觉体验。

以下是一个示例代码,演示了如何使用JS将背景位置设置为数组中的随机数:

代码语言:txt
复制
// 定义包含不同背景位置的数组
var backgroundPositions = [
  "0% 0%",       // 左上角
  "50% 0%",      // 上中
  "100% 0%",     // 右上角
  "0% 50%",      // 左中
  "50% 50%",     // 居中
  "100% 50%",    // 右中
  "0% 100%",     // 左下角
  "50% 100%",    // 下中
  "100% 100%"    // 右下角
];

// 获取需要设置背景的元素
var element = document.getElementById("myElement");

// 随机选择数组中的一个背景位置
var randomIndex = Math.floor(Math.random() * backgroundPositions.length);
var randomPosition = backgroundPositions[randomIndex];

// 将随机选择的背景位置应用到元素的背景样式上
element.style.backgroundPosition = randomPosition;

推荐的腾讯云相关产品:无

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 将Js数组对象中的某个属性值升序排序,并指定数组中的某个对象移动到数组的最前面

    需求整理:   本篇文章主要实现的是将一个数组的中对象的属性值通过升序的方式排序,然后能够让程序可以指定对应的数组对象移动到程序的最前面。...: 23},{name: "小芳", Id: 18}];   首先把数组中的Id值通过升序的方式排序: //源数组 var arrayData= [{name: "夏明", Id:24}, {name:..., Id: 24 },{ name: "小红", Id: 25 }] 找到Id为23的对象,移动到数组的最前面去(注意Id值唯一): 实现原理:因为移除数组对象需要找到对应数组对象的下标索引才能进行移除...,现在我们需要移除Id=23的对象,让其排到最前面去(先找到对象下标,然后把给数组对象赋值给temporaryArry临时数组,然后在通过下标移除newArrayData中的该对象值,最后将arrayData...[currentIdx]); //移除数组newArray中Id=23的对象 newArrayData.splice(currentIdx,1);//从start[一般为对象的索引]的位置开始向后删除

    12.3K20

    js递归算法实现,数组长度为5且元素的随机数在2-32间不重复的值

    生成一个长度为5的空数组arr。  生成一个(2-32)之间的随机整数rand。...把随机数rand插入到数组arr内,如果数组arr内已存在与rand相同的数字,则重新生成随机数rand并插入到arr内[需要使用递归实现,不能使用for/while等循环] 最终输出一个长度为5,且内容不重复的数组...arr[index]=randomNumber(arr); return nArr(length,arr); } 错误学习 Math.floor(Math.random()*31+2); 这样的写法是不严谨的...俺学习到了 (●’◡’●) 取范围区间值应该这样写: Math.floor(Math.random() * (max - min + 1)) + min; 原因如下: // 在 2 - 5 区间内生成随机数...别人的实现方式 俺看了一个比较优雅的代码,代码实现如下: // 6 行写完 function buildArray(arr, length, min, max) { var num = Math.floor

    1.6K21

    2022-12-22:给定一个数字n,代表数组的长度, 给定一个数字m,代表数组每个位置都可以在1~m之间选择数字, 所有长度为n的数组中,最长递增子序列长度为

    2022-12-22:给定一个数字n,代表数组的长度,给定一个数字m,代表数组每个位置都可以在1~m之间选择数字,所有长度为n的数组中,最长递增子序列长度为3的数组,叫做达标数组。返回达标数组的数量。...1 的时候没有取模的逻辑,因为非重点。来自微众银行。...// f、s、t : ends数组中放置的数字!...// n : 一共的长度!// m : 每一位,都可以在1~m中随意选择数字// 返回值:i..... 有几个合法的数组!...// 尤其是理解ends数组的意义!fn number2(n: i32, m: i32) -> i32 { //repeat(vec!

    2.1K20

    JS实现别踩白块小游戏

    最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作。...程序思路:如图:将游戏区域的CSS设置为相对定位、溢出隐藏;两块“游戏板”上分别排布着24块方格,黑色每行随机产生一个,“游戏板”向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop...*100,并且设置黑色小方块的背景色。...,并将其黑色的部分的数字PUSH进locArr中 function drawBoard(){     var temArr=generateRand();//这里应用一个临时的位置数组,为了防止两块游戏板之间的位置冲突...locArr=temArr.concat(locArr);//将临时数组相连到全局位置数组中     var board=document.createElement('div');     board.setAttribute

    3K80

    【Html.js——功能实现】新年贺卡(蓝桥杯真题-1768)【合集】

    通用选择器和元素选择器: *, html, body:将所有元素、html 元素和 body 元素的 margin 和 padding 都设置为 0,用于清除默认的边距和填充。...body:将页面的背景颜色设置为 var(--wine-red),高度设置为视口高度(100vh),使用 Flex 布局,垂直方向排列子元素,居中对齐,字体为 Caveat 字体。...button:设置按钮的样式,无边框,背景颜色为 var(--gold),添加内边距和边框半径,水平居中。 button:hover:当鼠标悬停在按钮上时,将鼠标指针变为手型,增加交互性。...页面显示时,会出现一个红色背景,中心位置有一个白色的 card 元素,上面有一个标题 “新年贺卡”,一个空的 p 元素,以及一个金色的按钮。...show 函数将选取的祝福语更新到 id 为 greeting-display 的 p 元素中,显示在贺卡上。

    7010

    【Html.js——echarts 柱形图】学生信息统计(蓝桥杯真题-1843)【合集】

    data: ['张三', '李四', '王五', '贺八', '杨七', '陈九']:将 x 轴的数据设置为学生的姓名列表,这些姓名将显示在 x 轴上。...yAxis:设置 y 轴的信息。 type: 'value':将 y 轴的类型设置为数值轴,用于显示学生的成绩值,因为成绩是数值类型的数据。...例如,在柱状图中,会根据 xAxis 和 yAxis 的配置将数据映射到相应的坐标轴上,确定柱子的位置和高度;在饼图中,会计算各部分数据在整体中的比例,确定扇区的角度。...创建一个空数组 arr。 进入 while 循环,不断生成随机数,直到数组长度达到 3 个。...检查生成的随机数是否已在数组中,不在的话添加到数组。 调用 document.write() 输出结果。

    10510

    Canvas 实践案例:页面动态气泡上升动画效果

    这个效果可以用于背景装饰或网页的一部分,增加视觉趣味性。实现效果概述我们将创建一个底部气泡动画,气泡从页面底部上升到随机高度,同时具有水平漂移效果。...('bubbleCanvas');const ctx = canvas.getContext('2d');// 设置 canvas 的宽度和高度为浏览器窗口的宽度和高度canvas.width = window.innerWidth...// 将新创建的气泡对象添加到 bubbles 数组中 bubbles.push({ x, y, radius, speed, drift, riseDistance });}// 绘制单个气泡function...; // 将气泡重置到底部 bubble.x = Math.random() * canvas.width; // 随机设置新的水平位置 bubble.drift = Math.random...使用 arc 方法在画布上绘制圆形气泡,气泡的颜色为半透明的白色。updateBubble: 更新气泡的位置,如果气泡超出了视口,则将其重置到底部。还会调整气泡的水平漂移和上升高度。

    32120

    JavaScript实现Fly Bird小游戏

    开发“开始界面” 考虑到草地的移动效果,我们在页面中加入两个草地 2.1 HTML ? 2.2 CSS ? 将wrapBg中的overflow:hidden注释掉的页面效果 ?...block示意图.png 障碍分为上管道和下管道,如示意图所示结构嵌套,这样就可以通过随机设置DownDiv2的高度和gapHeight的高度,来改变生成障碍的形态 block.js ?...公共对象文件 baseObj.js ,用来提供随机数,和两个矩形div的碰撞检测 ?...下面我的想法是在start按钮点击的时候创建一个block,把这个block存储到数组blocksArr 中,在landTimer 定时器的方法 landRun 中检查此数组的长度,如果数组不为空数组,...检查数组中第一个block,一旦达到一定位置,就在结构中移除downDivWrap和upDivWrap,同时在数组中删除block。 ? 当前的游戏效果 ?

    1.4K20

    JSP页面实现验证码校验

    目录 验证码校验分析 生成验证码 测试验证码 校验验证码 测试验证码校验 添加验证码刷新 在网页页面的使用中为防止“非人类”的大量操作和防止一些的信息冗余,增加验证码校验是许多网站常用的方式。...g.drawString(ch[index]+"",(i*15)+3, 18);//画数字以及数字的位置 sb.append(ch[index]); } 将验证码的内容存入...bi.getGraphics(); //通过缓冲区创建一个画布 Color c = new Color(200, 150, 255); //创建颜色 g.setColor(c);//为画布创建背景颜色...Session对象中 获取用户输入的验证码内容 将两个内容进行对照 代码实现: 获取Session中的验证码内容: String piccode=(String) request.getSession(...js 部分可以参阅:JavaScript 语言入门 也可以在ImageServlet中添加防止浏览器缓存的语句: response.setHeader("Pragma", "No-cache"); 公众号本文地址

    2.1K40

    基于HTML5打造的一款别踩白板小游戏

    背景简介 别踩白板这个游戏相信大家都玩过,这个是基于HTML5打造的简单小游戏,在PC端和移动端都能够运行,适应多种平台,今天我们使用原生JS搭配JQuery构建这个小游戏--别踩白板。...var colors = ['red', 'green', 'black', 'blue']; // 设置存放颜色的数组 这里存放颜色的数组不需要白色,每一个初始化出来的方块不设置背景颜色,它默认是白色...{ var oDiv = document.createElement('div');// 获取一个随机数将每一行找到一个随机div 设置上颜色 var index = Math.floor...将新生成的一行插入到已有行数的最前面 } var clickDiv = main.childNodes[0].childNodes[index]; // 根据随机数 设置一行中有颜色的...总体来说首先我们需要设置好游戏界面大致结构和样式,然后通过原生js控制方块的产生移动,以及点击等等,最终才呈现了一个合适的完整的界面效果;感兴趣的小伙伴可以去试一下

    1.1K10

    【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

    一、鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放...垂直方向的比例 仍然保持不变 , 那就需要移动图片的位置 ; 如果放大图片就需要将图片往左上方移动 ; 如果缩小图片就需要将图片往右下方移动 ; 此时可以分析出 , 如果要实现 鼠标滚轮缩放的中心点设置为当前鼠标中心点..., 并设置图片位置 ; 这样图片缩放时 , 始终可以保证鼠标指向的部位保持位置不变 ; 1、保存当前鼠标指针指向的位置 首先 , 在类中定义如下成员字段 , pointer_x 和 pointer_y...记录的是鼠标指针指向的界面中 Camvas 画布中的坐标位置 ; pointer_ratio_x 和 pointer_ratio_y 记录的是 鼠标指针指向位置对应图片中坐标位置的比例 ; public...(true); } } 2、执行效果 执行后 , 将图像中船头的 H 标识放置在界面中心 ; 将鼠标指针放在 H 位置 , 缩放 , 发现此时缩放 , 就是以当前鼠标指针为中心进行的缩放

    2.8K10

    微信小程序(游戏)----拼图游戏(设计思路)

    优点:方法一可以将大多数公用的WXSS提出到WXSS文件中,WXML代码比较清晰;方法二组件少一个,结构比较清晰。...缺点:方法一组件多,定位多,容易混乱;方法二背景必须在view组件上设置,代码冗余。 本文采用方法二实现。...2、图片位置的处理 1、 创建海报正确时的view定位和背景定位数组typeArr; 2、 创建打乱数组顺序的view定位和背景定位数组newTypeArr; 3、 对newTypeArr进行循环展示...方法二:循环每次随机一个位置,将当前位置的数和随机位置的数进行互换 function randomArr(){ let len = this.pointsArr.length; for(let...,循环矩阵数组,每次随机一个0 ~ N*N-1的数,保存到空数组,如果随机数在空数组存在,则此次循环重来,如果随机数在空数组不存在,则保存到空数组。

    2.4K40

    shuffle洗牌算法java_洗牌算法shuffle

    背景 阿里的面试的时候做的一道笔试题:题目:写一个方法,入参为自然数n (n > 0),返回一个自然数数组,数组长度为n,元素为[1,n]之间,且每个元素不重复,数组中各元素顺序要求随机; 实例1:...算法的自然语言描述为(给定1到N的序列):①记下从1到N的数字。 ②从1到结尾的未删除数字(包括)之间选择一个随机数k。 ③从低端开始计数,剔除尚未剔除的第k个数字,并将其写下一个单独的列表的末尾。...⑤现在在步骤3中写下的数字序列就是原始序列的随机排列。 理论上的费舍尔-耶茨洗牌算法的时间复杂度为O(n²),空间复杂度O(n)。...,我们使用JS实现这段伪代码 使用ES6实现的 Knuth-Durstenfeld Shuffle 算法需要的时间正比于要随机置乱的数,不需要额为的存储空间开销,时间复杂度为O(n),空间复杂度O(1)...当集合长度>5的时候,将集合转为数组,然后再次进行随机值交换,然后将数组重新set到集合里面去,这样做避免了将“顺序访问”列表洗牌到适当的位置而导致的二次行为。

    1.1K10

    JS基础知识点(二)

    在上一篇文章《JS基础知识点(一)》中我们学习了什么是js、js写法、js数据类型、js的函数。在本篇文章中我们将学习重要的部分:面向对象以及常用对象(math、date、string等)的方法 ?...自定义构造函数创建对象 function 大写字母的一个名字(){} 1.在内存开辟一块空间的空间(向内存申请一块空间的空闲) 2.把this设置为当前的对象(举例子) 3.设置该对象的属性和方法的值...对象中属性或方法的调用     对象中的属性或者是方法,不仅可以通过点语法的方式获取或者设置,同时可以使 用键值对的方式进行设置或者是获取 对象的遍历 对象一般通过for-in循环遍历 for(var...);向数组中追加一个数组,如果接收这个方法了,结果是追加数据后的数组的长度 .shift();删除数组中的第一个数据,返回值是删除后的那个数据值 .pop();删除数组中的最后一个数据,返回值是删除后的那个数据值...;是把数组中删除的位置用新的参数替换了 .indexof(要查找的数据);找到了就是索引,找不到就是-1 .join("字符串");返回值还是字符串,是把数组元素中间加上一个字符串,最终产生一个新的字符串

    1.2K20
    领券