随机点名系统

您所在的位置：网站首页 › 课堂随机点名程序 › 随机点名系统

随机点名系统

2024-03-20 04:24| 来源: 网络整理| 查看: 265

开发一个具有随机点名功能的微信小程序成品：

在这里插入图片描述

项目结构

在这里插入图片描述其中welcome为首页，Second和Third为两个点名界面，两个点名界面的代码一样，仅仅是里面随机点名的名字不同（故下面只介绍Second）。

欢迎界面

界面样式：

在这里插入图片描述

welcome.wxml：

//界面上的图案 Welcome to roll call system //Class9.1按钮 Class 9.1 //Class9.3按钮 Class 9.3

welcome.wxss：

/* pages/welcome/welcome.wxss */ page{ background-color: pink } .container{ display: flex; flex-direction:column; } .user-image{ width: 200rpx; height: 200rpx; } .moto-container{ margin-top: 150rpx; border: 1px solid #405f80; width:200rpx; height:80rpx; border-radius:5px; text-align:center; } .moto{ font-size: 29rpx; font-weight:620; /*字体粗细*/ line-height: 80rpx; color: #405f80; } .welcome-container{ margin-top: 100rpx; } .user-welcome{ margin-top: 300rpx; font-size: 42rpx; } .mt-container{ margin-top: 60rpx; border: 1px solid #405f80; width:200rpx; height:80rpx; border-radius:5px; text-align:center; } .mt{ font-size: 29rpx; font-weight:620; /*字体粗细*/ line-height: 80rpx; color: #405f80; }

welcome.js：

// pages/welcome/welcome.js Page({ /** * 页面的初始数据 */ data: { }, /* * go事件 */ go:function(){ wx.navigateTo({ url: '../Second/Second', }) }, /* *going事件 */ going:function(){ wx.navigateTo({ url: '../Third/Third', }) 点名界面

界面样式：

在这里插入图片描述

进入点名界面后，下方的按钮为Start，点击Start按钮后，名字开始滚动，按钮上的字变为Stop，点击Stop后，名字停止滚动，即实现随机点名。

second.wxml:

second.wxss:

/* pages/Second/Second.wxss */ page{ background-color: pink } .userinfo{ flex-direction: column; align-items: center; margin-top: 50px; display: flex; } .namel{ margin-top: 0px; } .userinfo-avatar{ font-weight:620; font-size: 170rpx; } .name{ margin-top: 500rpx; border: 2px solid #405f80; width:400rpx; height:100rpx; border-radius:5px; text-align:center; } .gu{ font-size: 90rpx; font-weight:620; /*字体粗细*/ line-height: 80rpx; color: #405f80; }

second.js:

// pages/Second/Second.js var app = getApp() var Paths = ['张三','李四', '王五 ', '孙悟空', '猪八戒', '唐僧']; //随机滚动的名字序列 var Index = 0; //初试默认为0 Page({ /** * 页面的初始数据 */ data: { Path:Paths[0], title:'Start', //设按钮文字为Start isRunning:false, userInfo:{}, }, bindViewTap:function(){ wx.navigateTo({ url: '../logs/logs', }) }, change:function(e){ Index++; //当Index>6时，Index=0，即当滚动到最后一个名字时，从头开始滚动，这个数值根据Paths中名字的个数改变 if (Index>6){ Index=0; } this.setData( { Path:Paths[Index] } ) }, guess:function(e){ let isRunning = this.data.isRunning; if(!isRunning){ this.setData( { title:'Stop', //按钮上的字变为Stop isRunning:true } ); this.timer=setInterval((function(){ this.change() }).bind(this),50 ); //名字滚动的频率 } else{ this.setData( { title:'Start', //按钮上的字变为StART isRunning:false } ); this.timer&&clearInterval(this.timer); } } 后记

如有问题可以在下方留言，如需要完整工程文件可联系QQ：2040243102

【本文地址】

随机点名系统

随机点名系统

今日新闻

推荐新闻