小程序纯CSS实现用户中奖名单无限滚动 + JS随机生成中奖用户名称

<template>  <view>        <view class="one">            <view class="two">view>            <view class="two"> view>    view>  view>template><style>  .two {    animation: myAnimation 16s infinite linear;    width: 100%;  }  /* 滚动动画 */  @keyframes myAnimation {    from {      transform: translate(0px, 0%);    }    to {      transform: translate(0px, -100%);    }  }style>

<template>  <view>    <view class="title">中奖名单view>
        <view class="swier">      <view class="swier-gun">        <view class="user-view" v-for="(item, index) in usernames" :key="index">          <view class="user-img">            <img class="all-img" src="">          view>          <view>            <view class="user-name">              {{index}}-{{item}}              <tex class="user-suo">抽到多多券...tex>            view>            <view class="user-suo user-time">              {{timeDatas[index]}}            view>          view>        view>      view>          <view class="swier-gun">        <view class="user-view" v-for="(item, index) in usernames" :key="index">          <view class="user-img">            <img class="all-img" src="">          view>          <view>            <view class="user-name">               {{index}}-{{item}}              <tex class="user-suo">抽到多多券...tex>            view>            <view class="user-suo user-time">              {{timeDatas[index]}}            view>          view>        view>      view>    view>  view>template>
<script>  export default {      data() {      return {        usernames: [],        timeDatas: [],      };    },    onLoad() {    // 用户名称 40是数量      this.generateNames(40);  // 生产不大于现在的时间      this.generTiem();    },
    methods: {      // 用户名生成      getRandomChar() {        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz天地玄黄宇宙洪日月盈昃辰宿列寒来暑往秋收冬闰余成岁律吕调云腾致雨露结霜金生丽水玉出昆剑号巨阙珠称光果珍李柰菜重芥海咸河淡鳞潜羽龙师火帝鸟官人始制文字乃服衣推位让国有虞陶吊民伐罪周发殷坐朝问1234567890';        return chars.charAt(Math.floor(Math.random() * chars.length));      },      getRandomName() {        const length = Math.floor(Math.random() * 10) + 5; // 名字长度在5到14之间        const halfLength = Math.floor(length / 2);        let name = '';
        // 生成前半部分        for (let i = 0; i < halfLength; i++) {          name += this.getRandomChar();        }
        // 添加4个星号        name += '****';
        // 生成后半部分        for (let i = 0; i < length - halfLength - 4; i++) {          name += this.getRandomChar();        }
        return name;      },      generateNames(count) {        for (let i = 0; i < count; i++) {          this.usernames.push(this.getRandomName());        }      },
      generTiem() {        // 获取当前日期和时间        function getCurrentDateTime() {          const now = new Date();          return now;        }
        // 生成随机时间段（返回Date对象，不晚于当前时间）        function getRandomTimeIntervalForTodayUpToNow() {          const now = new Date();          const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // 当天的开始时间
          // 生成从startOfDay到now之间的随机时间戳          const randomTimestamp = startOfDay.getTime() + Math.random() * (now - startOfDay);          return new Date(randomTimestamp);        }
        // 生成40个随机时间段并按时间从大到小排序        function generateAndSortRandomDateTimes(num) {          const dateTimes = [];
          for (let i = 0; i < num; i++) {            const randomDateTime = getRandomTimeIntervalForTodayUpToNow();            dateTimes.push(randomDateTime);          }
          // 按时间从大到小排序          dateTimes.sort((a, b) => b - a);
          // 格式化输出为 YYYY-MM-DD HH:MM:SS          return dateTimes.map(date => date.toISOString().slice(0, 19).replace('T', ' '));        }
        const currentDateTime = getCurrentDateTime();        const randomDateTimes = generateAndSortRandomDateTimes(40);        this.timeDatas = randomDateTimes;
      }    },  };script><style>  /* 状态栏 */  .nut-navbar {    background-color: #ffffff !important;  }
  /* 顶部图片 */  .win-box-img {    height: 600rpx;    border-radius: 40rpx;    overflow: hidden;    margin: 30rpx;    box-shadow: 2rpx 0 20rpx rgba(0, 0, 0, 0.5);  }
  /* 标题 */  .title {    margin: 60rpx 30rpx 30rpx 30rpx;    font-size: 40rpx;    font-weight: bold;  }
  .swier {    height: 800rpx;    overflow: hidden;  }
  .swier-gun {    animation: myAnimation 16s infinite linear;    width: 100%;  }
  @keyframes myAnimation {    from {      transform: translate(0px, 0%);    }
    to {      transform: translate(0px, -100%);    }  }
  .user-view {    display: flex;    margin: 30rpx;  }
  .user-img {    width: 80rpx;    height: 80rpx;    border-radius: 200rpx;    flex-shrink: 0;    margin-right: 30rpx;  background-color: red;  }
  .user-suo {    color: #777E90;    margin: 0 10rpx;  }
  .user-name {    font-size: 28rpx;  }
  .user-time {    font-size: 24rpx;  }style>