随机点名系统——微信小程序

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

成品：

项目结构

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

欢迎界面

界面样式：

welcome.wxml：

<!--pages/welcome/welcome.wxml-->
<view class='container'>
  <image class="user-image" src="/image/welcome.jpg"></image> //界面上的图案
<view class="welcome-container">    
  <text class="user-welcome">Welcome to roll call system</text>   </view>  
        
<view class="moto-container"bindtap='go'>  //Class9.1按钮
   <text class="moto">Class 9.1</text> 
 </view>  
 <view class="mt-container"bindtap='going'>   //Class9.3按钮
    <text class="mt">Class 9.3</text> 
</view>
 </view>

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:

<!--pages/Second/Second.wxml-->
  <view class="userinfo">  
    <view class="namel">   
      <text class="userinfo-avatar">{{Path}}</text>  
    </view> 
  <view class="name">   
     <text class="gu"bindtap='guess'>{{title}}</text>  
  </view>
 </view>

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