免费开源的年会抽奖软件-简单只需要修改html文件便可

一款简单好用的年会抽奖软件,修改很方便 默认已集成vue和jQuery 下载后直接点开 抽奖.exe 程序就可以使用了,,杀毒软件会杀,,请放行,无毒

下载地址

https://download.csdn.net/download/rllmqe/10892238

界面演示

默认带4个例子
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码例子 后台管理admin.html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="config.js"></script><!--数据配置文件-->
 <style type="text/css">
 <!--
body{background:#fff;width: 100%;height: 100%;overflow: hidden;} /*本版支持透明,需要设置背景*/
*{margin:0;padding:0;}

#h_kit .title-bar{margin-right:75px;padding-left:10px;height:28px;line-height: 28px;font-size:9pt;color:#333; position:relative;} 
#h_kit .title-bar .title{line-height:28px;margin-left:5px;}
#h_kit .kitmenu{float:right;width:525px;position:relative;z-index:999}
#h_kit .ctrls{  width:75px;height:28px; float:right;}
#h_kit .ctrls a{ display:block; float:left;height:14px;font-family:"Marlett";font-size:14px;padding:6px 3px 4px 4px;color:#333;cursor:pointer}
#lt{float:left;width: 650px;border-right:1px solid #333;padding-left:15px;margin-top:15px;}
#szlist,#zjlist{text-align:center;}
#zjlist td.zjr li{float:left;list-style:none;margin-right:5px;}
#szlist tr th,#zjlist tr th{border-bottom:1px solid #333;}
#rt{float:left;margin-left:15px;margin-top:15px;}
h1 span{font-size:12px;font-weight:300;}
 -->
 </style>

	<div id="h_kit"> <!--窗体头部-->
			<div class="ctrls"> 
						<a onclick="窗口('最小')">0</a>
						<a onclick="this.innerText = 窗口('最大')?'2':'1';">1</a>
						<a onclick="窗口('关闭')">r</a>
					</div>
			<div class="title-bar" onmousedown="窗口('拖拽')"> <span class="title">年会一</span> <a href="index.html">[抽奖页]</a></div>
	</div>
<div id="center">
	<div id="lt">
	<h1>添加奖品</h1>

			<table >
				<tbody>
					<tr>
						<td>奖品名称</td>
						<td>排序</td>
					</tr>
					<tr>
						<td ><input type="text" size="30" v-model="sz.name"></td>
						<td ><input type="text" size="5" v-model="sz.rank"></td>
					</tr>
					<tr>
						<td >
						<button type="submit" @click="add()">新增</button>
						<button type="submit" @click="edittj(sz.id)">编辑</button>
						</td>
					</tr>
				</tbody>
			</table>
		 <table id="szlist" style="width:300px">
			<tr>
				<th>奖项名称</th>
				<th>排序</th>
				<th>操作</th>
			</tr>
			<tr v-for="(mt,index) in szlist">
				<td >{{mt.name}}</td>
				<td >{{mt.rank}}</td>
				<td> <a @click="edit(mt.id,index)" v-if="mt.id">编辑</a> | <a @click="del(mt.id,index)"  >删除</a> </td>
			</tr>
		 </table>
	<h1>参奖人设置<span>你可以填写编号或手机号 每个以英文逗号 "," 分割</span></h1>
	
	<textarea  v-model="cjr" style="width:90%;height:190px">{{cjr}}</textarea>
	<div><button type="submit" @click="editcjr()">保存</button></div>
	</div>
	<div id="rt"><!--右侧中奖结果-->
		<h1>中奖信息</h1>
		<table id="zjlist" style="width:100%">
			<tr>
				<th>中奖时间</th>
				<th>奖项名称</th>
				<th>中奖人</th>
				<th>操作</th>				
			</tr>
			<tr v-for="(mt2,index) in zjlist" >
				<td >{{mt2.sj}}</td>
				<td >{{mt2.jpmz}}</td>
				<td v-html="mt2.zjr" class="zjr"></td>
				<td><a @click="del2(mt2.id,index)"  v-if="mt2.id">删除</a> </td>
			</tr>
		 </table>
	</div>
</div>
<script type="text/javascript">
//获取奖品列表

var app = new Vue({
  el: '#center',
  data: {
	cjr: '',
	szlist: {},
	zjlist: {},
	sz: {}
  },
  created(){//默认打开执行
	this.listdata();
	this.listdata2();
  },
  methods: {
    listdata: function () {//获取数据列表
		var sql="SELECT * FROM 奖品设置 ORDER BY rank";
		var sj=数据列表(sql);  //格式类型{"ok": "200","data": [{},{}]}
		this.szlist= sj.data;
		var sql2="SELECT TOP 1 * FROM 参奖人";	//格式类型{"ok": "200","data": {}}
		var sj2=数据一条(sql2);
		this.cjr= sj2.data.cjr;
    },
	listdata2: function () {//获取数据列表
		var sql2="SELECT * FROM 中奖名单 ORDER BY sj";
		var sj2=数据列表(sql2);  
		this.zjlist= sj2.data;
    },
	
	del: function (id, index) {//删除中奖名单
		var sj=mt删除('奖品设置','id='+id+''); //表,条件
		if(sj=='200'){this.szlist.splice(index, 1);}	
    },
	add: function () {//增加奖品设置
		//var sql="INSERT INTO 奖品设置 ([name],[rank]) VALUES('"+this.sz.name+"','"+this.sz.rank+"')";
		//var sj=数据插入(sql);	 //执行成功返回 "200" 失败	"300"
		var sj=mt插入('奖品设置',this.sz); 
		if(sj=="200"){
			//this.$set(this.szlist,this.szlist.length,this.sz);//获取不到id
			this.listdata();
		}else{alert("错误!");}
		//this.listdata();//也可以执行这个更新
    },
	edittj: function (id) {//编辑奖品设置
		if(!id){alert("请选择需要编辑的数据");}
		var sj=mt编辑('奖品设置',this.sz,' id='+id+''); //表,数据,条件
		if(sj=="200"){this.listdata();}
		//this.listdata();//也可以执行这个更新
    },
	edit: function (id, index) {//编辑取值
		//var sql="SELECT * FROM 奖品设置 WHERE id="+id+"";
		//var sj=数据一条(sql); //返回数据格式类型{"ok": "200","data": {}}
		//this.sz=sj.data[0];
		this.sz=this.szlist[index];
    },
	editcjr: function () {//增加奖品设置
		var sj=mt编辑('参奖人',{cjr:this.cjr},'id=1'); 
		if(sj=="200"){
			alert("成功!");
		}else{alert("错误!");}
    },
	del2: function (id, index) {//删除中奖名单
		//var sql="DELETE * FROM 中奖名单 WHERE id="+id+"";
		//var sj=数据删除(sql);	 //执行成功返回 "200" 失败	"300"
		var sj=mt删除('中奖名单','id='+id+''); //表,条件
		if(sj=='200'){this.zjlist.splice(index, 1);}
    }
  }
});	
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

rllmqe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值