【微信小程序】随机点名系统（点击开始滚动名字点击结束按钮结束滚动）

【微信小程序】随机点名系统（点击开始滚动名字点击结束按钮结束滚动）

1、效果图：

2、js代码

{
  Page({
    data:{
      condition: Math.floor(Math.random()*7+1)//有多少名*多少名 比如有7位 *7+1
    },

    changeMotto: function() {
  

      var that = this;
      this.interval =setInterval(function () {
        that.changeContent();
        console.log("轮播请求0.01秒触发一次");
      }, 10)    //代表0.01秒钟发送一次请求
      
    },
    changeContent: function () {
      var isShow = this.data.condition;
      this.setData({ condition: Math.floor(Math.random()*7+1) })
    },
    endMotto: function() {
     
      clearInterval(this.interval);
    },
  })
  
}

3、wxml代码

  <view >随机点名系统：</view>			
		<view class="mycon" >
			<!--让文字来回变化-->
			<view wx:if="{{condition===1}}">张三</view>
			<view wx:if="{{condition===2}}">李四</view>
			<view wx:if="{{condition===3}}">xxx</view>
			<view wx:if="{{condition===4}}">nihao</view>
			<view wx:if="{{condition===5}}">???</view>
			<view wx:if="{{condition===6}}">小李</view>
			<view wx:if="{{condition===7}}">小花</view>
     
		</view>
    <button class="button1"  bindtap='changeMotto'>点击开始</button>
    	<button class="button2" bindtap='endMotto'>结束</button>

4、wxss代码

view{
  width:100%;
  height: 30px;
  text-align: center;
  background-color: antiquewhite;
}
.button1{
  width:50%;  float:left;
}
.button2{
  width:50%; float:right;
}
.mycon{
  font-size: 25px;
}