江苏福彩投注站彩票投注助手（html+css+js）

web前端页面——设计江苏福彩投注站彩票投注助手（Html+CSS+JS）

设计要求如下：
福利彩票号码由7个号码，外加一个特别号，共8个号码（不能重号）组成，号码范围为01-30的任意一个整数。如果号码为个位数，则在号码前加“0”，显示为：“0”+数字，如：03、07。
功能要求如下：
（1）界面上设置5个按钮、一个列表框；

（2）单击“机选1注”按钮，调用 selectNumber(1)，将 1注的号码形成字符串添加到列表框中，并将每次产生的第 1行号码作为预选项,高亮度显示，编写通用的产生n注号码 selectNumber(n)函数；

（3）单击“机选5注”按钮，调用selectNumber(5)，将5 注的号码形成字符串添加到列表框中，并将每次产生的第 1行号码作为预选项,高亮度显示；

（4）单击“机选10注”按钮，调用 selectNumber(10)，将10注的号码形成字符串添加到列表框中,并将每次产生的第 1行号码作为预选项,高亮度显示；

（5）单击“删除”按钮，将列表框中选中的列表项删除,如果列表框无列表项可删,则用警告消息框提示出错信息；

（6）单击“全部删除”按钮，将列表框中的所有列表项全部删除，如果列表框无列表项可删，则用警告消息框提示出错信息；

源码如下：
html部分

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>江苏福彩投注站彩票投注助手</title></head><link rel="stylesheet" type="text/css" href="./css/index.css"/><script type="text/javascript" src="./js/index.js"></script><body><div id="window1"><div id=""><div id="img1"><img src="img/ico_7l.gif" ></div><div id="img2"><img src="img/fc_logo.jpg" ></div></div><div id="title"><p>福彩投注站彩票投注助手</p></div>   <div id=""><div id="list1"><dl><button type="button" onclick="selectNumber(1)">机选1注</button></dl><dl><button type="button" onclick="selectNumber(5)">机选5注</button></dl><dl><button type="button" onclick="selectNumber(10)">机选10注</button></dl></div><div id="list2"><select name="number8" id="number8" size="5"></select></div><div id="list3"><dl><button type="button" onclick="delSelect();">删除</button></dl><dl><button type="button" onclick="delSelectAll();">全部删除</button></dl></div></div></div></body>
</html>

css部分

 #window1{height: 600px;width: 800px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}#img1{float: left;}#img2{float: right;}#title{margin-top: 100px;}#title p{text-align: center;font-size: 46px;}button{font-size: 20px;width: 130px;height: 70px;}#list1{float: left;}#list2{padding-top: 13px;padding-left: 20px;float: left;}#list3{float: right;}#list3 dl{margin-bottom: 100px;}select{width:500px;height:250px;}

js部分

function $(id){return document.getElementById(id);
}
function selectNumber(n){//彩票选号助手var number=new Array();var objsel=$("number8");var selnum=objsel.options.length;//保存选项添加前总数for (j=0;j<=n-1;j++){var list="";for (i=0;i<=7 ;i++ ){ //产生1注号码         var tmp=Math.floor(Math.random()*30+1); if (tmp<10) {tmp="0"+tmp; }for (var k=0;k<=number.length-1 ;k++ ){if (tmp==number[k]) { //重号处理tmp=Math.floor(Math.random()*30+1); if (tmp<10) {tmp="0"+tmp; }k=0;}           }number[i]=tmp;}list=number.join("  ");  //1 注彩票号码//写入到列表框中var opt=document.createElement("option");//产生选项节点var opt_text=document.createTextNode(list);//产生文本节点opt.value=j;   //记下添加列表项的个数opt.appendChild(opt_text);//将文本添加给选项objsel.appendChild(opt);//将选项添加给列表框}//始终将新添加的第一个列表项作为预选项objsel.selectedIndex=selnum;
}
function  delSelect() { var objSelect=$( "number8"); var strIndex=objSelect.selectedIndex; if (strIndex!=-1){objSelect.options.remove(strIndex);} else{window.open("请先选择列表项后再删除！");}
}
function  delSelectAll(){ var objSelect=$("number8"); var strIndex=objSelect.options.length; if (strIndex>0){for (i=0;i<=strIndex-1;i++ ){objSelect.options.remove(0);}} else{window.alert("请先选择列表项后再删除！");// alert("请先选择列表项后再删除！");}
}

效果图如下：

项目包的下载地址

江苏福彩投注站彩票投注助手（html+css+js）相关推荐

采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
快速获取一个网站的所有资源,图片,html,css,js......扒站,仿站必备工具
今天介绍一款软件,可以快速获取一个网站的所有资源,图片,html,css,js...... 以获取某车官网为例我来展示一下这个软件的功能. 输入网站地址和网站要保存的文件夹如果网站名称后我们可以扫 ...
HTML5期末大作业：在线音乐网站设计——简洁bootstrap响应式社交音乐网站模板html整站(38页) HTML+CSS+JavaScript
HTML5期末大作业:在线音乐网站设计--简洁bootstrap响应式社交音乐网站模板html整站(38页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与 ...
最新ie图标变灰css,css+js整站变灰（兼容IE7+）
原标题:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写, ...
mac版小米手机助手_手机版B站下载助手 v1.0.3 从此告别打开电脑下载
QQ 群:738547589 微信群:加小编微信,备注:进群内容如有侵权,请及时联系小编删除! B站遇到好看的视频集锦离线没网的时候想看怎么办?B站下载助手APP,只需一个分享链接,一键缓存视频,还 ...
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业——橙色的素材火资源整站(25页)
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业--橙色的素材火资源整站(25页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
HTML5期末大作业：网站——美丽家乡(南京介绍7个页面) 家乡文化介绍学生DW网页设计作业源码(HTML+CSS+JS) ~学生dreamweaver网页设计作业成品
HTML期末大作业~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...
CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
前言就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观. 知识点本 ...

江苏福彩投注站彩票投注助手（html+css+js）

web前端页面——设计江苏福彩投注站彩票投注助手（Html+CSS+JS）

江苏福彩投注站彩票投注助手（html+css+js）相关推荐

最新文章

热门文章