Axure基础详解二十:中继器随机抽奖效果

效果演示


组件

一、中继器

  • 建立一个“中继器”内部插入一个“正方形”,给“正方形”添加一个【样式效果】>>【选中状态】填充背景为红色,字体白色。
  • 在中继器表格中插入两列数据函数:【xuhao】(序号列,按12345……填写,用来实现随机抽取时的位置;)和【xuanzhong】(只用于报税抽奖过程中的选中状态。0代表未被选中,1代表被选中,默认值为1;)
  • 中继器布局:为【横向】水平分布,每行项目数为3。

二、“开始抽奖”按钮


全局变量

设置两个【全局变量】

  • xuanzhongxuhao : 表示被选中的位置序号,用于记录闪烁的位置,默认值为1。
  • quanshu:用于记录抽奖轮回闪烁的次数。


交互设置

一、页面载入时交互

【设置变量】“quanshu"为“[[Math.floor(Math.random()*9+18)]]”(【random()】函数表示获取一个0-1之间的数;*9是为了在序号1-9中随机抽取一个;+18表示先让抽奖效果闪烁两遍;【floo()】函数表示向上取整。)

二、中继器每项加载时交互

【设置文本】将item.xuhao的值设置给中继器里的“正方形”的文本;

【设置选中状态】当“xuanzhong”的值为0时:“正方形”选中状态为“假”;当“xuanzhong”的值为1时:“正方形”选中状态为“真”。


三、“抽奖按钮”单击时交互

“抽奖按钮”单击时交互有三种判断条件

1、当“xuanzhongxuhao≥1”和“xuanzhongxuhao≤dataCount”和“quanshu>0”三个条件共同满足时(【dataCount】变量表示“中继器”最大行数。)

  • 【禁用按钮】鼠标单击按钮以后,我们要首先禁用掉当前按钮,为了防止重复点击而出现的问题。
  • 标记行】标记中继器里的所有行,然后更新已标记的行,即更新所有行,将所有行里面的xuanzhong列的值都改为0,目的是将全部“正方形”的设置未被选中状态。
  • 更新行】更新的【规则】逻辑是当【“xuhao”==“xuanzhongxuhao”】,将这一行的xuanzhong列的值更新为1。这样就可以保证每次只会选中1个,而且选中这个之后又会自动设置记录文本+1,从而实现循环。
  • 等待】设置一个等待的时间,即每个“正方形”选中显示蓝色背景的时间,为200毫秒。
  • 设置变量】设置“xuanzhongxuhao”为他原来的值+1,代表当前“正方形”已经闪烁完成了,记录下一个要闪烁的“正方形”的序号;设置“quanshu”为他原来的值-1,代表刚开始随机出来的闪烁次数不断减小。
  • 【触发事件】触发当前“抽奖按钮”鼠标单击时事件实现循环。例如刚开始随机出来的数字是20,那么他就会一直不断的循环在转,20到19到18……到0,才会停止。


2、当“xuanzhongxuhao>dataCount"(【dataCount】变量表示“中继器”最大行数。)

  • 【设置变量】设置“xuanzhongxuhao”为1,表示重头开始。
  • 【触发事件】触发当前“抽奖按钮”鼠标单击时事件实现循环。


3、当“quanshu=0”时

  • 【触发事件】触发页面载入时事件,重置随机次数;
  • 【设置变量】“xuanzhongxuhao”为1,表示重头开始;
  • 【启用按钮】完成一轮抽取,得到结果,重启按钮。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/159723.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【DevOps】Git 图文详解(二):Git 安装及配置

Git 图文详解(二):Git 安装及配置 1.Git 的配置文件2.配置 - 初始化用户3.配置 - 忽略.gitignore Git 官网:https://www.git-scm.com/ 下载安装包进行安装。Git 的使用有两种方式: 命令行:Git 的命令通过系…

L1 频段卫星导航射频前端低噪声放大器芯片MS2659

产品简述 MS2659 是一款具有高增益、低噪声系数的低噪声放大器 (LNA) ,支持 L1 频段多模式全球卫星定位,可以应用于 GPS 、 北斗二代、伽利略、 GLONASS 等 GNSS 导航接收机中。芯片采 用 SOT23-6 的封装形式。 主要特点 ◼ 支持北斗、 …

【mysql】2006 - Server has gone away

执行了一组插入语句 提示:2006 - Server has gone away; 2006-服务器已经消失; 消失去哪里了,被黑洞吞没了吗?!!! 网络问题 网络不稳定?断网了?检查网络连…

asp.net实验室设备管理系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目

一、源码特点 asp.net实验室设备管理系统 是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 asp.net实验室设备管理系统1 二、功能介绍 本系统使用Microsoft Visual Studio 2019为开发工具,SQL …

Appium自动化测试完全指南

背景 在当今快速发展的互联网时代,UI 需求越来越大、越来越高大上、越来越复杂,相对应的 App 作为最重要的大前端的一部分,也不可避免。 App 迭代的不断加速,需求的不断复杂化,给测试人员增加了非常大的工作量&#…

十二.Jenkins持续集成

十二.Jenkins持续集成 一.安装jenkins 1.下载 Jenkins下载地址:http://jenkins-ci.org/ 或 https://mirrors.jenkins-ci.org/redhat/2.安装 可以通过官网的安装方式来安装 安装完后,需要修改以下的配置 vim /usr/lib/systemd/system/jenkins.servic…

揭示高防CDN的局限性与探讨其小众化原因

在网络安全领域,高防CDN(高防御内容分发网络)被认为是保护网站免受恶意攻击的强大工具,然而,尽管其在防护方面表现卓越,高防CDN在广泛应用中仍然相对小众。本文将从高防CDN的局限性出发,深入探讨…

nodejs微信小程序-客户管理管理系统的设计与实现-安卓-python-PHP-计算机毕业设计推荐

然而客户管理系统是一项较为复杂的工作,涉及多个组织、多个层次的协调和共同管理,整个过程需要将管理系统和人员进行全面整合。文章在具体研究过程中从多方面入手,针对当前企业管理中客户管理系统应用存在的问题进行了分析,阐述了…

酷柚易汛ERP - 通用设置操作指南

1、系统设置 对系统进行初步设置,如系统LOGO、站点名称、备案号、版权信息、尾部信息及系统相关的一些基础设置 2、应用/小程序配置 对系统移动端进行相关配置 3、短信配置 对系统短信进行配置,此配置用于移动端一些通知类信息发送【目前仅支持阿里云…

Pandas get_dummies用法

get_dummies 是 pandas 实现one hot encode的方式 ​  one-hot的基本思想:将离散型特征的每一种特征取值都看成一种状态,若指定离散特征中有N个 不相同的取值,那么我们就可以将该特征抽象成N种不同的状态,one-hot编码保证了每一…

vue项目中设置background: url() 是行内样式不生效,样式表是可以的

[TOC](vue项目中设置background: url() 是行内样式不生效,样式表是可以的) 首先:如果不是项目中普通的一个index.html中是可以的 一、原因 在Vue项目中,行内样式和样式表的编译规则是有所不同的。当你在Vue组件的行内样式中使用相对路径引用图…

机器学习:十大算法快速回顾

一、说明 对于机器学习的是个经典算法,本篇将展示一个回顾,注意,本篇不是具体原理信息介绍,没有代码,但是对于初学者是一个有益的导读。 二. 线性回归 2.1 算法描述 有没有想过数据奇才如何预测未来?输入线…

Gdevops北京站 2023年全球敏捷运维峰会-核心PPT资料下载

一、峰会简介 2023 Gdevops全球敏捷运维峰会-北京站成功举办,一众产学研界技术大佬与新锐专家,以智能为主线,就数据库、运维、架构、金融科技等领域进行了前沿技术与实践经验交流,一同畅聊AIGC、云原生、数智化转型下的新机遇。 …

uniapp 手动调用form表单submit事件

背景&#xff1a; UI把提交的按钮弄成了图片&#xff0c;之前的button不能用了。 <button form-type"submit">搜索</button> 实现&#xff1a; html&#xff1a; 通过 this.$refs.fd 获取到form的vue对象。手动调用里面的_onSubmit()方法。 methods:…

mac苹果电脑需要安装杀毒软件吗?

随着数字时代的发展&#xff0c;计算机安全问题变得越来越重要。而在计算机安全领域中&#xff0c;杀毒软件是一个被广泛讨论的话题。苹果电脑需要安装杀毒软件吗&#xff1f;对于苹果电脑用户来说&#xff0c;他们常常会疑惑自己是否需要安装杀毒软件来保护自己的电脑。本文将…

Notepad++ 通过HexEditor插件查看.hprof文件、heap dump文件的堆转储数据

文章目录 需求场景插件安装查看notepad的版本&#xff0c;看看是32位的还是64位的下载对应的版本解压导入插件打开notepad插件文件夹&#xff1a;Notepad安装目录新建一个HexEditor文件夹选中插件文件导入 重启notepad使用 需求场景 想要查看app内存的某个域的数据。 利用Andr…

idea显示pom.xml文件漂黄警告 Dependency maven:xxx:xxx is vulnerable

场景&#xff1a; idea警告某些maven依赖包有漏洞或者依赖传递有易受攻击包&#xff0c;如下&#xff1a; 解决&#xff1a; 1、打开idea设置&#xff0c;找到 File | Settings | Editor | Inspections 2、取消上述两项勾选即可

目标检测标注工具AutoDistill

引言 在快速发展的机器学习领域&#xff0c;有一个方面一直保持不变&#xff1a;繁琐和耗时的数据标注任务。无论是用于图像分类、目标检测还是语义分割&#xff0c;长期以来人工标记的数据集一直是监督学习的基础。 然而&#xff0c;由于一个创新性的工具 AutoDistill&#x…

02-1解析xpath

我是在edge浏览器中安装的xpath&#xff0c;需要安装的朋友可以参考下面这篇博客最新版edge浏览器中安装xpath插件 一、xpathd的使用 安装lxml pip install lxml ‐i https://pypi.douban.com/simple导入lxml.etree from lxml import etreeetree.parse() 解析本地文件 htm…

计算机中msvcp140.dll丢失的解决方法,总结5个有效的方法

msvcp140丢失错误指的是在系统中缺少了"msvcp140.dll"动态链接库文件&#xff0c;该文件是Microsoft Visual C 2015 Redistributable的一个重要组成部分。这个错误通常会导致一些软件无法正常运行&#xff0c;出现错误提示。msvcp140是一个C运行时库&#xff0c;它包…