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 相关文章推荐
HTML上传控件取消选择
Mar 06 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
浅谈react路由传参的几种方式
Mar 23 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
浅谈php冒泡排序
2014/12/30 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
文字幻灯片
2006/06/26 Javascript
非常漂亮的JS代码经典广告
2007/10/21 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
深入讲解Python编程中的字符串
2015/10/14 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
init进程的作用
2015/08/20 面试题
高中军训的心得体会
2014/09/01 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
庆七一宣传标语
2014/10/08 职场文书
大学生支教感言
2015/08/01 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python