jquery+php随机生成红包金额数量代码分享


Posted in Javascript onAugust 27, 2015

本文实例讲述了jquery+php实现的随机生成红包金额数量特效。分享给大家供大家参考。具体如下:
jquery+php实现的随机生成红包金额数量特效是一段实现了可以将一定金额的钱生成多个不同金额的红包的效果代码,红包数量与金钱可以自己设定。
运行效果图:                              -------------------查看效果 下载源码-------------------

jquery+php随机生成红包金额数量代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jquery+php随机生成红包金额数量代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jquery+php随机生成红包金额数量代码</title>

<script type="text/javascript" src="js/jquery.min.js"></script>


<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.demo{width:300px; margin:60px auto 10px auto}
@media only screen and (min-width: 420px) {
 .demo{width:500px; margin:60px auto 10px auto}
}
.demo p{height:62px; line-height:30px}
.demo p label{width:100px; text-align:right}
.input{width:140px; height:24px; line-height:14px; border:1px solid #d3d3d3}
button, .button {
 background-color: #f30;color: white;border: none;box-shadow: none;
 font-size: 17px;font-weight: 500;font-weight: 600;
 border-radius: 3px;padding: 15px 35px;margin: 26px 5px 0 0px;cursor: pointer; }
button:hover, .button:hover {background-color: #f00; }
#result{width:360px; margin:10px auto}
#result p{line-height:30px}
#result p span{margin:4px; color:#f30}
</style>

</head>

<body>


<div class="demo">
 <button>生成10个红包,总金额20元</button>
</div>
<div id="result"></div>


<script type="text/javascript">
$(function(){
 $("button").click(function(){
 $.ajax({
  type: 'POST',
  url: 'bao.php',
  dataType: 'json',
  beforeSend: function(){
  $("#result").html('正在分配红包');
  },
  success: function(json){
  if(json.msg==1){
   var str = '';
   var res = json.res;
   $.each(res,function(index,array){ 
   str += '<p>第<span>'+array['i']+'</span>个红包,金额<span>'+array['money']+'</span>元,余额<span>'+array['total']+'元</span></p>';
   });
   $("#result").html(str);
  }else{
   $("#result").html('数据出错!');
  }
  }
 });
 });
});
</script>

<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

bao.php代码页面:

<?php
header("Content-Type: text/html;charset=utf-8");

$total=20;//红包总额 
$num=10;// 分成10个红包,支持10人随机领取 
$min=0.01;//每个人最少能收到0.01元 


for ($i=1;$i<$num;$i++) { 
  $safe_total=($total-($num-$i)*$min)/($num-$i);//随机安全上限 
  $money=mt_rand($min*100,$safe_total*100)/100; 
  $total=$total-$money; 
 $arr['res'][$i] = array(
 'i' => $i,
 'money' => $money,
 'total' => $total
 );
} 
$arr['res'][$num] = array('i'=>$num,'money'=>$total,'total'=>0);
$arr['msg'] = 1;
echo json_encode($arr);
?>

main.css代码页面:

@charset "utf-8";
/* CSS Document */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
a{color:#007bc4/*#424242*/; text-decoration:none;}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
html{background:url(../images/bg.png)}
body{height:100%; font:14px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C; background: url(../images/body_bg.gif) repeat-x}
img{border:none}


#header{width:980px; height:92px; margin:0 auto; position:relative;}
#logo{width:240px; height:90px; background:url(../images/logo_demo.gif) no-repeat}
#logo h1{text-indent:-999em}
#logo h1 a{display:block; width:240px; height:90px}


#main{width:980px; min-height:600px; margin:30px auto 0 auto; border:1px solid #d3d3d3; background:#fff; -moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px; border-radius:5px;}
h2.top_title{margin:4px 20px; padding-top:15px; padding-left:20px; padding-bottom:10px; border-bottom:1px solid #d3d3d3; font-size:18px; color:#a84c10; background:url(../images/arrL.gif) no-repeat 2px 16px}

#footer{height:60px;}
#footer p{ padding:10px 2px; line-height:24px; text-align:center}
#footer p a:hover{color:#51555C}
#stat{display:none}

.google_ad{width:728px; height:90px; margin:50px auto}
.ad_76090,.ad_demo{width:760px; height:90px; margin:40px auto}
.demo_topad{position:absolute; top:15px; right:0px; width:470px; height:60px;}


@media screen and (min-width: 320px) and (max-width : 480px) {
 html{-webkit-text-size-adjust: none;}
 #header{width:100%}
 #main{width:100%; margin:10px auto; -moz-border-radius:0px;-khtml-border-radius: 0px;-webkit-border-radius: 0px; border-radius:0px;}
 .demo_topad{display:none}
 .google_ad{width:100%; margin:40px auto; text-align:center}
.ad_76090,.ad_demo{width:100%; height:auto; margin:40px auto;text-align:center}
.demo{width:98%; margin:10px auto}
}

以上就是为大家分享的jquery+php随机生成红包金额数量代码,希望大家可以喜欢。

Javascript 相关文章推荐
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
javascript模拟C#格式化字符串
Aug 26 #Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 #Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 #Javascript
jQuery带时间的日期控件代码分享
Aug 26 #Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 #Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 #Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 #Javascript
You might like
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php eval函数一句话木马代码
2015/05/21 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Python实现购物车程序
2018/04/16 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
python用什么编辑器进行项目开发
2020/06/17 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
三维科技面试题
2013/07/27 面试题
翻译专业应届生求职信
2013/11/23 职场文书
国贸专业求职信
2014/06/28 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
写给导师的自荐信
2015/03/06 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers