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 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
JS常用函数使用指南
Nov 23 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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排序算法的复习和总结
2012/02/15 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
简单解决Python文件中文编码问题
2015/11/22 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
白血病募捐倡议书
2014/05/14 职场文书
化工专业求职信
2014/07/01 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
员工表扬信怎么写
2015/05/05 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书