模拟select控件&&显示单击的坐标&&用户按下键盘，显示keyCode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>模拟select控件</title>

<style>

html,body{height:100%;overflow:hidden;}

body,div,form,h2,ul,li{margin:0;padding:0;}

ul{list-style-type:none;}

body{background:#23384e;font:12px/1.5 \5fae\8f6f\96c5\9ed1;}

#search,#search form,#search .box,#search .select,#search a{background:url(img/search.jpg) no-repeat;}

#search,#search .box,#search form{height:34px;}

#search{position:relative;width:350px;margin:10px auto;}

#search .box{background-position:right 0;}

#search form{background-repeat:repeat-x;background-position:0 -34px;margin:0 20px 0 40px;}

#search .select{float:left;color:#fff;width:190px;height:22px;cursor:pointer;margin-top:4px;line-height:22px;padding-left:10px;background-position:0 -68px;}

#search a{float:left;width:80px;height:24px;color:#333;letter-spacing:4px;line-height:22px;text-align:center;text-decoration:none;background-position:0 -90px;margin:4px 0 0 10px;}

#search a:hover{color:#f60;background-position:-80px -90px;}

#search .sub{position:absolute;top:26px;left:40px;color:#fff;width:198px;background:#2b2b2b;border:1px solid #fff;display:none;}

#search .sub li{height:25px;line-height:24px;cursor:pointer;padding-left:10px;margin-bottom:-1px;border-bottom:1px dotted #fff;}

#search .sub li.hover{background:#8b8b8b;}

</style>

<script type="text/javascript">

window.onload = function ()

{

    var oSelect = document.getElementsByTagName("span")[0];

    var oSub = document.getElementsByTagName("ul")[0];

    var aLi = oSub.getElementsByTagName("li");

    var i = 0;

    oSelect.onclick = function (event)

    {

        var style = oSub.style;

        style.display = style.display == "block" ? "none" : "block";

        //阻止事件冒泡

        (event || window.event).cancelBubble = true

    };

    for (i = 0; i < aLi.length; i++)

    {

        //鼠标划过

        aLi[i].onmouseover = function ()

        {

            this.className = "hover"

        };

        //鼠标离开

        aLi[i].onmouseout = function ()

        {

            this.className = "";

        };

        //鼠标点击

        aLi[i].onclick = function ()

        {

            oSelect.innerHTML = this.innerHTML

        }

    }

    document.onclick = function ()

    {

        oSub.style.display = "none";

    };

};

</script>

</head>

<body>

<div id="search">

    <div class="box">

        <form>

            <span class="select">请选择游戏名称</span>

            <a href="javascript:;">搜索</a>

        </form>

    </div>

    <ul class="sub">

        <li>地下城与勇士</li>

        <li>魔兽世界（国服）</li>

        <li>魔兽世界（台服）</li>

        <li>热血江湖</li>

        <li>神鬼传奇</li>

        <li>大话西游II</li>

        <li>QQ幻想世界</li>

    </ul>

</div>

</body>

</html>

显示单击的坐标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>显示单击的坐标</title>

<style>

pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;}

span{color:#999;}

</style>

<script type="text/javascript">

document.onclick = function (event)

{

    var event = event || window.event;

    alert("坐标：[" + event.clientX + ", " + event.clientY + "]")

}

</script>

</head>

<body>

<pre>

&lt;script type="text/javascript"&gt;

    var event = event || window.event;

    alert("坐标：[" + event.clientX + ", " + event.clientY + "]")

&lt;/script&gt;

</pre>

</body>

</html>

用户按下键盘，显示keyCode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>用户按下键盘，显示keyCode</title>

<style>

body{

    text-align:center;

    font:30px/1.5 \5fae\8f6f\96c5\9ed1, arial;

}

pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;text-align:left;}

span{color:#999;}

</style>

<script type="text/javascript">

window.onload = function ()

{

    var oP = document.getElementsByTagName("p")[0];

    document.onkeydown = function (event)

    {

        var event = event || window.event;

        oP.innerHTML = event.keyCode;

        return false

    }

}

</script>

</head>

<body>

<pre>

&lt;script type="text/javascript"&gt;

window.onload = function ()

{

    var oP = document.getElementsByTagName("p")[0];

    document.onkeydown = function (event)

    {

        var event = event || window.event;

        oP.innerHTML = event.keyCode;

        return false

    }

}

&lt;/script&gt;

</pre>

<p>这里将显示您按下键的 keyCode</p>

</body>

</html>

模拟select控件&&显示单击的坐标&&用户按下键盘，显示keyCode的更多相关文章

模拟select控件，css模拟下拉
<!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="t ...
模拟select控件功能
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
jquery input 下拉框(模拟select控件)焦点事件
本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
js+CSS实现模拟华丽的select控件下拉菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
解决bootstrap-table表头filter-control select控件被遮挡显示不全的问题
[本文出自天外归云的博客园] 在使用bootstrap-table的extension——filter-control时(对应表格的data-filter-control="true&quo ...
C# 常用控件及单击事件
1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2)WindowState属性: 用来获取或设置窗体的窗口状态. 取值有三种: No ...
Asp.net绑定带层次下拉框（select控件）
1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...
Selenium webdriver 之select 控件封装，解决onchange问题
使用webdriver的时候,select 控件经常会绑定onchange 事件,在selenium2.09 之前click 方法对onchange 事件有bug,2.09 以后修复了,但是根据经验也 ...
JavaScript封装一个实用的select控件
最近一直把精力放在项目上面,导致忽略的一些底层的东西.以前就一直觉得原有的select控件很丑,正好周末有时间,试着做了一个简单封装,实现了它的基本功能.我总结了一下,大概分为三个部分: 1.对显示样 ...

随机推荐

Ubuntu14连接MySql报错“can't connect to local mysql server through socket '/var/run/mysqld/mysqld.sock'”
起因:我在Ubuntu14 64位系统中安装mysql后,后来通过mysql -u用户名 -p密码的命令连接 Mysql数据库时,报错"can't connect to local mys ...
Windows ToolTips简要介绍（转）
原文转自 https://blog.csdn.net/sesiria/article/details/77450151 Windows 标准控件ToolTips简要介绍参考文档 MSDN https ...
I2C总线介绍
1. 简介 I2C, Inter-Integrated Circuit, 是一种串行通信总线,用于连接微控制器及其外围设备它是一种两线式串行总线(串行数据:SDA; 串行时钟频率:SCL), 利用电阻 ...
自己写操作系统 2 - 安装bochs虚拟机
以ubuntu操作系统为例一.命令行安装 sudo apt-get install vgabios bochs bochs-x bximage 此方法方便,不过都说这个方法安装的bochs没有调试功 ...
js生成一周内的日期+周几
(如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果有两种: 两者区别是 1.第一天(今天)显示今日 2.第一天(今天)显示周几 (第一个图是在手机上显示的效果,第二个是PC网页上显示的效果) ...
【转】Talend作业设计模式和最佳实践-Part I
原文地址:https://mp.weixin.qq.com/s?__biz=MzA3OTg1Mzk4Nw==&mid=2453261363&idx=2&sn=e0f426022 ...
学习SPRING BOOT, SPRING CLOUD之Eureka和security
有意思,明天去杨浦报名了一个SPRING CLOUD沙龙, 今天再抓紧看看哈哈哈. Eureka服务端: EurekaApplication.java package com.packtpub.Eur ...
[BZOJ1070][SCOI2007]修车费用流
1070: [SCOI2007]修车 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 6209 Solved: 2641[Submit][Status] ...
微信小程序实现豆瓣读书
个人练习项目,使用了scss+webstorm watcher来处理样式.整体上没有什么难点. github:https://github.com/axel10/wx-douban-read
51nod 1007 正整数分组【01背包变形】
1007 正整数分组基准时间限制:1 秒空间限制:131072 KB 分值: 10 难度:2级算法题收藏关注将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 ...

模拟select控件&&显示单击的坐标&&用户按下键盘，显示keyCode

模拟select控件&&显示单击的坐标&&用户按下键盘，显示keyCode的更多相关文章

随机推荐

热门专题