微信小程序彩票号码生成器

 更新时间:2021年09月27日 16:59:27   作者:桃豆豆  
这篇文章主要为大家详细介绍了微信小程序彩票号码生成器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序彩票号码生成器的具体代码,供大家参考,具体内容如下

一、案例说明

设计一个小程序,生成一注7个彩票号码(1-31),并在圆形图标上显示,加上一个按钮,每点一次重新生成,同时生成不同的颜色圆形图标。

二、案例代码

1)index.wxml文件

<!--index.wxml-->
 
<image src="/image/caipiao.png" style="width: 750rpx; height: 256rpx; display: inline-block; box-sizing: border-box; left: NaNrpx; top: NaNrpx"></image>
 
<view class="box">
  <view class="title">彩票生成器</view>
  <view>生成的彩票序列:</view>
  <view wx:for="{{rand}}">{{item}}</view>
</view>
 
<view class="context">
  <view class="item" style="background-color: {{color1}};">{{a}}</view>
  <view class="item" style="background-color: {{color2}};">{{b}}</view>
  <view class="item" style="background-color: {{color3}};">{{c}}</view>
  <view class="item" style="background-color: {{color4}};">{{d}}</view>
  <view class="item" style="background-color: {{color5}};">{{e}}</view>
  <view class="item" style="background-color: {{color6}};">{{f}}</view>
  <view class="item" style="background-color: {{color7}};">{{g}}</view>
</view>
==================================
<button type="primary" bindtap="newRand">生成新的彩票号码</button>

2)index.wxss文件

/**index.wxss**/
 
.box{
  margin: 20rpx;
  padding: 20rpx;
  border: 3px dashed rgb(248, 72, 2);
  background-color: rgba(110, 144, 216, 0);
}
 
.title{
  font-size: 30px;
  text-align: center;
  margin-bottom: 15px;
  color: rgb(59, 15, 252);
}
 
.context{
  display: flex;
  text-align: center;
  line-height: 100rpx;
  font-weight: bolder;
  color: rgb(28, 3, 56);
}
 
.item{
  flex-grow: 1;
  
  border-radius: 50px; 
}

3)index.js文件

// index.js
 
var rand;
 
function createRand(){
  rand=[];
  
  for(var i=0;i<7;i++){
    var r=0;
 
    while(r==0){
      r=parseInt(Math.random() * 32);              
    }    //生成不为0的数
                                          
    r=(r/Math.pow(10,2)).toFixed(2).substr(2)  //控制生成数的形式为两位,在一位数的前面补“0”
    rand[i]=r;
 
    for (var j=0;j<i;j++){
      if (rand[j]==r){i=i-1;}
    }    //保证与之前生成的数不重复
                                     
    console.log(rand[i]);
  }
};
 
Page({
  CreateColor:function(){
    var color=[];
    var letters="0123456789ABCDEF";
    for(var i=0;i<7;i++){
      var c="#";
      for(var j=0;j<6;j++){
        c+=letters[Math.floor(Math.random()*16)]
      }
      color.push(c);   //随机生成颜色
    }
    console.log(color);
    this.setData({
      color1:color[0],
      color2:color[1],
      color3:color[2],
      color4:color[3],
      color5:color[4],
      color6:color[5],
      color7:color[6]   
    })
  },      //颜色的加载
  
  onLoad:function(){
    createRand();
    this.CreateColor();
    this.setData({
      rand:rand,
      a:rand[0],
      b:rand[1],
      c:rand[2],
      d:rand[3],
      e:rand[4],
      f:rand[5],
      g:rand[6],
    })
  },
  newRand:function(){
    createRand();
    this.CreateColor();
    this.setData({
      rand:rand,
      a:rand[0],
      b:rand[1],
      c:rand[2],
      d:rand[3],
      e:rand[4],
      f:rand[5],
      g:rand[6],
    })
  },
 
})

注意:本案例要求彩票生成数不能与之前的重复,且生成的是1-31的数字,所以不可以出现数字“0”。

三、案例截图

四、分析总结

在 index.wxml 文件代码中,利用1个view内部嵌套7个view组件的方法实现七个“彩球”的界面设计。并在下面添加一个button组件,该组件绑定点击事件,实现生成新的彩票号码。

在index.js文件中,定义了createRand()函数,用于产生随机数列,该函数首先利用for循环产生7个随机数并将这些数据添加到数组中。Math.random()函数用于产生0~1之间的随机数,Math.random()*32能够产生0~32之间的随机数,(r/Math.pow(10,2)).toFixed(2).substr(2)可控制随机生成的r为两位数,同时在一位数之前补“0”。 定义的onLoad函数和newRand函数,通过this.sarData()方法将结果渲染到视图层。

本案还涉及了在JavaScript中创建随机颜色的方法。创建颜色的设计思想是:利用Math.random()和Math.floor()函数从构成颜色的16个十六进制字符(0~F)中随机找出6个字符构成一种颜色,连续找7次就可以生成7种随机颜色。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js实现黑白div块画空心的图形

    js实现黑白div块画空心的图形

    这篇文章主要介绍了js实现黑白div块画空心的图形,画出矩形、三角形、菱形、圆形,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • javascript常用正则表达式汇总

    javascript常用正则表达式汇总

    本文给大家总结了一下常见的javascript检验各种规则的代码,通过正则表达式来实现,都是项目中经常需要用到的,有需要的小伙伴可以参考下。
    2015-07-07
  • 使用pjax实现无刷新更改页面url

    使用pjax实现无刷新更改页面url

    pjax=pushState+ajax,相信用过github的同学都知道,github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url。一起来学习一下这个插件吧。
    2015-02-02
  • 简单谈谈JS中的正则表达式

    简单谈谈JS中的正则表达式

    下面小编就为大家带来一篇简单谈谈JS中的正则表达式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript实现无刷新上传预览图片功能

    JavaScript实现无刷新上传预览图片功能

    这篇文章主要为大家详细介绍了JavaScript实现无刷新上传预览图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript使用Range调色及透明度实例

    JavaScript使用Range调色及透明度实例

    本文给大家分享的是使用range做的一个简单的手动调色并可以得到RGB值的小工具,非常的实用,有需要的小伙伴可以参考下
    2016-09-09
  • 原生JS中slice()方法和splice()区别

    原生JS中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法。那么他两种有什么区别呢?今天通过本文教程给大家简单介绍下,需要的朋友可以参考下
    2017-03-03
  • GreyBox技术总结(转)

    GreyBox技术总结(转)

    GreyBox是一个遮罩层的组件也称模式窗口或模态窗口(所谓模态窗口,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的窗口),它运行以后可以产生不错的界面。
    2010-11-11
  • 微信小程序登录对接Django后端实现JWT方式验证登录详解

    微信小程序登录对接Django后端实现JWT方式验证登录详解

    这篇文章主要介绍了微信小程序登录对接Django后端实现JWT方式验证登录详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 鼠标滑过出现预览的大图提示效果

    鼠标滑过出现预览的大图提示效果

    这篇文章主要介绍了如何实现鼠标滑过出现预览的大图提示效果,需要的朋友可以参考下
    2014-02-02

最新评论