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实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
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可逆加密/解密函数分享
2012/09/25 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
python实现ipsec开权限实例
2014/11/11 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
python连接mysql有哪些方法
2020/06/24 Python
幼儿园家长会邀请函
2014/01/15 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
助学感谢信范文
2015/01/21 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
创业计划书之家教中心
2019/09/25 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python