javascript实现仿腾讯游戏选择


Posted in Javascript onMay 14, 2015

到我们玩腾讯游戏的时候,会有很多选择,比如选择什么区,什么人物等。下面简单制作腾讯游戏选择。

javascript实现仿腾讯游戏选择

javascript实现仿腾讯游戏选择

javascript实现仿腾讯游戏选择

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>纸牌游戏</title>
 <style type="text/css">
 #div{width:450px;height:134px;border:1px solid #fff}
 </style>
 </head>
 <body>
 <center>
 <div id="div">
 <img src="images/banner.jpg" width="450" height="134" border="0" alt="">
 </div>
 <div style="width:450px;height:134px;border:1px solid #fff;background:#1C85B4">
 <p>请选择游戏类别:<select id="lei" onChange="ck()" >
 <option>--游戏分类--</option>
 </select></p>
  <p>请选择游戏名称:<select id="youxi">
 <option>--游戏名称--</option>
 </select></p>
   <p><input name="" type="image" src="images/login.gif" /></p>
 </div>
 </body>
 <script type="text/javascript">
 var lei= document.getElementById("lei");
 var youxi= document.getElementById("youxi");
 //创建省市数组
 var List=new Array();
   List['纸牌游戏'] = ['斗地主','拖拉机','桥牌','拱猪','打百分'];
   List['棋类游戏'] = ['围棋','象棋','跳棋','西瓜棋','五子棋'];
   List['其他游戏'] = ['枪林弹雨','跑跑卡丁车','英雄联盟','CF','英雄三国'];
   for(var i in List){
    lei.add(new Option(i,i),null);
   }
    lei.onchange=function(){
    var lei= document.getElementById("lei").value;
    var youxi= document.getElementById("youxi");
    youxi.options.length=0;
    for(var k in List[lei]){
       youxi.add(new Option(List[lei][k],List[lei][k]),null);  
  }
 }
</script>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jquery键盘事件介绍
Jan 31 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
JavaScript实现Flash炫光波动特效
May 14 #Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 #Javascript
javascript搜索框效果实现方法
May 14 #Javascript
javascript操作ul中li的方法
May 14 #Javascript
javascript中createElement的两种创建方式
May 14 #Javascript
javascript常用方法总结
May 14 #Javascript
javascript实现动态改变层大小的方法
May 14 #Javascript
You might like
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
初识PHP中的Swoole
2016/04/05 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
python3中str(字符串)的使用教程
2017/03/23 Python
Python内存读写操作示例
2018/07/18 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python对excel的基本操作方法
2021/02/18 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
"序列点" 是什么
2016/07/29 面试题
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
十八大宣传标语
2014/10/09 职场文书
教师岗位职责
2015/02/03 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL