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 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
js indexOf()定义和用法
Oct 21 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
7个JS基础知识总结
Mar 05 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 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实现详细解析
2013/08/24 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
php文件读取方法实例分析
2015/06/20 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
js 编写规范
2010/03/03 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
JQuery判断正整数整理小结
2017/08/21 jQuery
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
js验证账户名是否重复
2020/05/26 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
python实现定时发送邮件
2020/12/23 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
出国导师推荐信
2014/01/16 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
电力安全事故反思
2014/04/27 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
会计演讲稿范文
2014/05/23 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
感谢信格式范文
2015/01/22 职场文书
民事起诉书范本
2015/05/19 职场文书
三八妇女节致辞
2015/07/31 职场文书
环境卫生标语
2015/08/03 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书