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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
JavaScript 防篡改对象的用法示例
Apr 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/05 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
详解Python with/as使用说明
2018/12/13 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
财务人员的自我评价范文
2014/03/03 职场文书
大班亲子运动会方案
2014/06/10 职场文书
爱护花草树木的标语
2014/06/11 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书