C# MVC模式下商品抽奖功能实现

最近项目需求的一个抽奖功能给整理了下,语言表达能力不好,写的不好请勿吐槽,一笑而过就好。好了下面开始说说这个抽奖功能。因为涉及到公司的项目所以一些敏感的地方均已中文代替。

首先在后台添加奖品的名称以及概率如图:

后台代码没什么好说的,我们来看看前端代码。

通过html做出如下样式:

 <div class="turntable-bg">

          <div class="pointer">
            <img id="pointer" src="~/Content/images/pointer.png" alt="pointer" />
          </div>
          <div class="rotate">
            <img id="turntable" src="~/Content/images/turntable.png" alt="turntable" />
          </div>
        </div>

这里要注意切图时候的角度。不然旋转后所对应的角度就不对了。

下面给抽奖的指针添加点击事件:

function rotate() {
    $.ajax({
      type: 'POST',
      url: '/控制器/方法',
      dataType: 'json',
      cache: false,
      error: function () {
        alert('出错了!');
        return false;
      },
      success: function (data) {
        if (data == 1 || data == -3) {
          var bRotate = true;
          if (data == 1) {
            alert("请登录!");
          }if (data == -3) {
            alert("对不起,您的奖券不足!")
          }
        }
        else {
          var angles = parseInt(data.angle); //角度
          var txt = data.prize; //奖项
          var awards = parseInt(data.id);
          var bRotate = false; //如果bRotate为 true 的时候无法点击
          var rotateFn = rotateFn_method(awards, angles, txt);

          if (bRotate) return;

          switch (awards) {
            case 0:
              //var angle = [26, 88, 137, 185, 235, 287, 337];
                // rptateFn_method 三个参数均为后台传出,0,337  为转盘旋转所对应的角度,最后一个则为商品名称

              rotateFn_method(0, 337, '奖品名称');
              break;
            case 1:
              //var angle = [88, 137, 185, 235, 287];
              rotateFn_method(1, 26, '奖品名称');
                break;
              case 2:
                //var angle = [137, 185, 235, 287];
                rotateFn_method(2, 88, '奖品名称');
              break;
            case 3:
              //var angle = [137, 185, 235, 287];
              rotateFn_method(3, 137, '奖品名称');
              break;
            case 4:
              //var angle = [185, 235, 287];
              rotateFn_method(4, 185, '奖品名称');
              break;
            case 5:
              //var angle = [185, 235, 287];
              rotateFn_method(5, 235, '奖品名称');
              break;
            case 6:
              //var angle = [235, 287];
              rotateFn_method(6, 235, '奖品名称');
              break;
            case 7:
              //var angle = [287];
              rotateFn_method(7, 282, '奖品名称');
              break;
          }
        }

      }
    });
  }

  //旋转事件
  function rotateFn_method(awards, angles, txt) {
    var bRotate = false;
    bRotate = !bRotate;
    $('#turntable').stopRotate();
    $('#turntable').rotate({
      angle: 0,
      animateTo: angles + 1800,
      duration: 8000,
      callback: function () {
          $("#Pl h4").html("恭喜你抽中" + txt + "");
        }
        bRotate = !bRotate;
      }
    })
  };
//刷新当前页面
  function locateEnd() {
    window.location.reload();
  }

  这样页面的转盘就可以旋转以及弹出奖品了,js中注释应该比较明确,我就不多对js进行解释了,下面来说说控制器里计算概率的逻辑,之所以不把概率计算写在js中,是因为js文件容易被篡改,想必大家都知道。话不多说,下面上代码:  

//判断用户是否登录
      if (admin != null)
      {
         //获取后台设置的数据,见图1
        var LdList = hr.LuckdrawList();
         //因为涉及到公司的项目所有一些敏感地方均已中文代替
        List<double> dt = LdList.Select(i => i.概率).ToList();
         //创建一个数值
        double[] Array = dt.ToArray();
        //角度
        int angle = 0;
        //奖品
        var prize = "";
        var id = 0;
         //将概率放入数值,调用下面的Get方法计算出所返回的概率位于数值中的第几位
        var Pl = Get(Array);
         //获取奖品表中位于Pl的产品
        var model = LdList[Pl];
           // id , angle 角度  prize 奖品
if (model.奖品等级 == 1)
          {
            angle = 26;
            prize = model.奖品;
            id = 1;
          }
          if (model.奖品等级 == 7)
          {
            angle = 88;
            prize = model.奖品;
            id = 2;
          }
          if (model.奖品等级 == 4)
          {
            angle = 137;
            prize = model.奖品;
            id = 3;
          }
          if (model.奖品等级 == 3)
          {
            angle = 185;
            prize = model.奖品;
            id = 4;
          }
          if (model.奖品等级 == 6)
          {
            angle = 235;
            prize = model.奖品;
            id = 5;
          }
          if (model.奖品等级 == 2)
          {
            angle = 282;
            prize = model.奖品;
            id = 7;
          }
          if (model.奖品等级 == 5)
          {
            angle = 337;
            prize = model.奖品;
            id = 0;
          }
          return Json(new { angle = angle, prize = prize, id = id });
        }return Json(data);
      }

计算概率的部分:

/// <summary>
    /// 获取抽奖结果
    /// </summary>
    /// <param name="prob">各物品的抽中概率</param>
    /// <returns>返回抽中的物品所在数组的位置</returns>
    private static int Get(double[] prob)
    {
      int result = 0;
      int n = (int)(prob.Sum() * 1000);      //计算概率总和,放大1000倍
      Random r = rnd;
      float x = (float)r.Next(0, n) / 1000;    //随机生成0~概率总和的数字

      for (int i = 0; i < prob.Count(); i++)
      {
        double pre = prob.Take(i).Sum();     //区间下界
        double next = prob.Take(i + 1).Sum();  //区间上界
        if (x >= pre && x < next)        //如果在该区间范围内,就返回结果退出循环
        {
          result = i;
          break;
        }
      }
      return result;
    }
    private static Random rnd = new Random();

基本上就这些,有不足的地方请各位帮忙补充一下,谢谢大家的阅读。

(0)

相关推荐

  • C#实例代码之抽奖升级版可以经表格数据导入数据库,抽奖设置,补抽

    我写代码一直是这个风格,废话不多,直接给大家贴代码,现在还是老规矩,具体代码如下所示: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Drawing.Imaging; using System.Linq; using System.Text; using System.Threadi

  • PHP的MVC模式实现原理分析(一相简单的MVC框架范例)

    他们的工作原理大家应该也比较感兴趣,下面我说说一个mvc框架长什么样. 路由机制 在互联网我们都是通过url提供服务,因此不同的url有不同的服务.用户访问不同的页面也就获得了不同的服务.那么我们的服务是如何通过url来区分不同的服务呢. 我们的web程序就要通过url寻找到不同的文件,进行不同的业务逻辑处理.我们的路由机制就是根据url,寻找到对应的controller,和action,然后由action进行具体的业务逻辑处理. 一个简单的controller 复制代码 代码如下: //定义一

  • 浅谈使用MVC模式进行JavaScript程序开发

    随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在javascript开发里应用MVC模式,这个问题似乎会一直被提到,所以偶在这里粗略的谈一下自己的看法吧. MVC模式的基本理念,是通过把一个application封装成model, view和controller三个部分达到降低耦合,简化开发的目的.这么说很空洞,大家可以实际看个例子: <select id="selAnimal"> <option value="cat">cat

  • C# MVC模式中应该怎样区分应用程序逻辑(Controller层)和业务逻辑(Model层)?

    现在的大部分框架都是 MVC 模式,但 MVC 三个部分怎么配合,这里做了一点总结: 基本原则:业务逻辑代码应该写在 M 里面,而应用程序逻辑应该写在 C 里面.V 只是单纯的展示数据. 举个简单例子吧:用户往购物车添加一个商品 用户点击商品的"添加到购物车"按钮,引起一次请求.服务器开始处理该请求,过程: 1.检查当前用户是否有权限(比如是否已经登录.用户帐户状态.是否可以购物等) 2.检查要添加的商品ID是否有效. 3.检查要添加的商品库存是否足够 4.将商品加入购物车,并保存购物

  • PHP MVC模式在网站架构中的实现分析

    视图(View) "视图"主要指我们送到Web浏览器的最终结果??比如我们的脚本生成的HTML.当说到视图时,很多人想到的是模版,但是把模板方案叫做视图的正确性是值得怀疑的. 对视图来说,最重要的事情可能是它应该是"自我意识(self aware)"的,视图被渲染(render)时,视图的元素能意识到自己在更大框架中的角色. 以XML为例,可以说XML在被解析时,DOM API有着这样的认知??一个DOM树里的节点知道它在哪里和它包含了什么. (当一个XML文档中的

  • 基于C#实现简单的随机抽奖小程序

    废话不多说了,直接给大家贴代码了.具体代码如下所示: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using Sys

  • 关于php mvc开发模式的感想

    使用mvc开发模式是为了什么?? MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型.视图.控制器.它们各自处理自己的任务. 我们有必要严格区分mvc的三层模式模式吗? m与c的跨界使用更有利于快速开发. 在我使用的框架中 m与c可以跨界使用,并不严格区分.有时候很想直接在c里处理m的事,因为业务的数据处理并不多见,也许只有一次. 这样在m里面写个函数, 再用c调用,变得复杂,这与php快速开发理念相悖. 我们需要的什么? 1.视图分离

  • PHP中MVC模式的模板引擎开发经验分享

    使Web系统的开发与维护更加方便,从而有效的节省人力物力,受到了越来越多企业的青眯. 模板引擎是MVC模式建立过程的重要方法,开发者可以设计一套赋予含义的标签,通过技术解析处理有效的把数据逻辑处理从界面模板中提取出来,通过解读标签的含义把控制权提交给相应业务逻辑处理程序,从而获取到需要的数据,以模板设计的形式展现出来,使设计人员能把精力更多放在表现形式上.下面是我对模板引擎的认识与设计方法: 说的好听些叫模板引擎,实际就是解读模板数据的过程(个人观点^^).通过我对建站方面的思考认识,网站在展现

  • C# MVC模式下商品抽奖功能实现

    最近项目需求的一个抽奖功能给整理了下,语言表达能力不好,写的不好请勿吐槽,一笑而过就好.好了下面开始说说这个抽奖功能.因为涉及到公司的项目所以一些敏感的地方均已中文代替. 首先在后台添加奖品的名称以及概率如图: 后台代码没什么好说的,我们来看看前端代码. 通过html做出如下样式: <div class="turntable-bg"> <div class="pointer"> <img id="pointer" s

  • MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据

    看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是MongoDB基本应用实现起来还是比较轻松的,甚至代码比基本的ADO.net访问关系数据源还要简洁.由于其本身的"非关系"的数据存储方式,使得对象关系映射这个环节对于MongoDB来讲显得毫无意义,因此我们也不会对MongoDB引入所谓的"ORM"框架. 下面我们将逐步

  • JSP使用MVC模式完成删除和修改功能实例详解

    本文实例讲述了JSP使用MVC模式完成删除和修改功能的方法.分享给大家供大家参考.具体如下: 目标: ① 进一步理解MVC模式: ② 掌握删除功能的基本实现过程: ③ 掌握修改功能的基本实现过程. 主要内容: ① 使用MVC完成删除功能: ② 使用MVC模式完成信息更新功能. 1.如何使用MVC模式完成删除功能 根据MVC模式的特点,分别考虑MVC的3个部分. ① 首先考虑V部分: 输入:通常删除功能是在查询的基础上完成的,所以在用户信息列表界面上可以添加删除的超链. 输出:提示用户删除是否成功

  • JavaWeb使用mvc模式实现登录功能

    目录 部署项目.环境搭建 详细内容 登录实现 部署项目.环境搭建 详细内容 1.导包 2.web >> index.jsp              web >> login.jsp              web >> success.jsp 1)  web >> index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java"

  • 理解javascript中的MVC模式

    MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法.模型有对数据直接访问的权利.模型不依赖 "视图" 和 "控制器", 也就是说 模型它不关心页面如何显示及如何被操作. 视图:视图层最主要的是监听模型层上的数据改变,并且实时的更新html页面.当然也包括一些事件的注册或者ajax请求操作(发布事件),都是放在视图

  • Java实现抽奖功能

    本文实例为大家分享了Java实现抽奖功能的具体代码,供大家参考,具体内容如下 1 概述 项目开发中经常会有抽奖这样的营销活动的需求,例如:积分大转盘.刮刮乐.老虎机等等多种形式,其实后台的实现方法是一样的,本文介绍一种常用的抽奖实现方法. 整个抽奖过程包括以下几个方面: 奖品 奖品池 抽奖算法 奖品限制 奖品发放 2 奖品 奖品包括奖品.奖品概率和限制.奖品记录. 奖品表: CREATE TABLE `points_luck_draw_prize` ( `id` bigint(20) NOT N

  • jsp+dao+bean+servlet(MVC模式)实现简单用户登录和注册页面

    功能介绍 本项目通过使用jsp和servlet实现简单的用户登录.主要逻辑为: 如果用户不存在,则首先进行注册(注册信息同步到数据库中). 进行注册后,可进入登录页面对账号进行登录. 如果账号存在,则正确跳转到欢迎界面,否则提示用户账号信息输入错误. 用户进行登录页面时需要填写验证码同时可勾选是否两周内免登陆. 用户进入欢迎界面,则会显示这是用户第几次登录,如果不是第一次登录则会显示上次登录时间. 如果用户直接进入welcome,(没有进行登录,直接打开welcome.jsp)则会跳转到登录页面

  • ASP.NET MVC模式中应用程序结构详解

    目录 一.App_Data 二.App_Start 三.Content 四.Controllers 五.font 六.Models 七.Scripts 八.Views 九.Web.config 1.根目录下面的Web.config文件 2.Views文件夹下面的Web.config 十.Global.asax 在上一篇文章中,讲解了一些MVC的概念,并且创建了第一个ASP.NET MVC项目,这篇文章将讲解ASP.NET MVC程序中的代码解构,新创建的MVC应用程序解构如下图所示: 一.App

  • ASP.NET Core中MVC模式实现路由二

    目录 1.URL生成 2.URL生成方式 2.1根据操作名称生成URL 2.2根据路由生成URL 2.3在HTML中生成URL 2.4在操作结果中生成URL 3.区域(Area) 4.实现IActionConstraint的路由约束 相关文章 ASP.NET Core中MVC模式实现路由一 ASP.NET Core中MVC模式实现路由二 1.URL生成 MVC应用程序可以使用路由的URL生成功能,生成指向操作(Action)的URL链接. IUrlHelper 接口用于生成URL,是MVC与路由

随机推荐