首页
学习
活动
专区
工具
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;

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

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

相关·内容

Android开发ImageLoder加载网络图片时图片设置ImageView背景方法

本文实例讲述了Android开发ImageLoder加载网络图片时图片设置ImageView背景方法。...,比如通过设置src在某些场景下是不能填充满整个ImageView,但是通过设置背景就可以实现,而框架并没有提供图片设置背景方法,我在网上找了半天也看到了一些解决方案,但不是我想要,于是我决定去看看源码是怎么实现...废话到此为止 开始进入主题(上代码) /** * 加载网络图片设置ImageView背景 * * @param url * @param view */ public void loadImageToBackground...这个类,我在看源码时候发现ImageLoder就是通过 ImageViewAware这个类把加载图片设置到src属性(有兴趣小伙伴可以自己去看源码,源码我就不贴出来了),所以我只需要重写这个类方法图片设置背景就解决了...下面是BgImageViewAware类代码: /** * <pre 图片设置ImageView背景</pre * Created by ZCM on 2016/8/5. version

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

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

    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

    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: 更新气泡位置,如果气泡超出了视口,则将其重置到底部。还会调整气泡水平漂移和上升高度。

    21720

    JavaScript实现Fly Bird小游戏

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

    1.3K20

    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"); 公众号本文地址

    2K40

    基于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

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

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

    1.2K20

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

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

    2.8K10

    【云+社区年度正文】手把手用JavaScript 带你打造一款随机选双色球彩票号码网页

    三、项目实现 HTML 创建无序列表ul,添加列表选项 li,创建input标签,type类型设置button,设置默认值,添加对应属性,设置body背景颜色。...设置每个li样式(宽高,背景样式,边框圆角变成一个圆形,字体大小,颜色,设置行高对齐),list-style: none;去除ul前面的小黑点。...遍历数组每一个元素,然后比对生成随机数是否和当前数组红号是否重复。如果重复,那么就将flag值设置false。并跳出for循环。...判断产生随机数,是否负数,如果是负数,交换a,b数值,使其返回正数。...页面加载执行,定义scroll()方法,判断arr是不是等于6个号码,是否存在相同数值。对数组元素进行排序,设置蓝色。

    1.5K30

    从零开始学 Web 之 JavaScript 高级(一)原型,贪吃蛇案例

    2、init 方法初始化小方块宽高,颜色以及 div 加入到地图 map 。 3、product 方法是产生随机位置,并赋值给小方块 left,top。...11.1、地图模块 地图模块最简单了,就是一块 div,设置宽高,背景就可以了。...div 组成,另外还有宽高,背景颜色属性,在食物脱标之后还有left,top属性,所以为了创建一个食物对象,就需要一个食物构造函数,这个构造函数要设置食物属性就是上面提到属性。...设置私有函数,其实就是自调用函数一个函数,保证不被自调用函数外面使用。...3、小蛇最初身体是三个 div,所以每个 div 都是一个对象,有自己宽高和背景颜色和坐标。,所以这里用一个数组保存小蛇身体。

    65330
    领券