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中的函数模式详解
Feb 11 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
Node 代理访问的实现
Sep 19 Javascript
原生JavaScript实现幻灯片效果
Feb 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
js返回顶部实例分享
2016/12/21 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python import用法以及与from...import的区别
2015/05/28 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
企业总经理岗位职责
2014/02/13 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
环保宣传语大全
2015/07/13 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis