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 面向对象全新理练之继承与多态
Dec 03 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
Vue2 轮播图slide组件实例代码
May 31 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
smarty简单应用实例
2015/11/03 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python File readlines() 使用方法
2018/03/19 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
如何解决安装python3.6.1失败
2020/07/01 Python
用python对excel查重
2020/12/07 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
Jar包的作用是什么
2014/03/30 面试题
24岁生日感言
2014/01/13 职场文书
工作睡觉检讨书
2014/02/25 职场文书
银行委托书范本
2014/09/28 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书