模拟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.对显示样 ...

随机推荐

使用java mail的网易smtp协议发送邮件
package com.enation.newtest; import java.security.GeneralSecurityException; import java.util.Propert ...
js得到时间戳(10位数)
//从1970年开始的毫秒数然后截取10位变成从1970年开始的秒数 function timest() { var tmp = Date.parse( new Date() ).toString( ...
制作TimeLine物流信息展示效果
var TimeLine = function (_id) { this.id = _id; this._top = 40; this.vHeight = 40; this.global_top = ...
华为上机测试题（数字字符串转二进制-java）
PS:此题满分,可参考 /* * 题目:数字字符串转二进制 * 描述: 输入一串整数,将每个整数转换为二进制数,如果倒数第三个Bit是“0”,则输出“0”,如果是“1”,则输出“1”. 题目类别: ...
ipv6nginx错误
400 Bad Request The plain HTTP request was sent to HTTPS port错误参考官方文档解决方法如下: server {listen 80;liste ...
【C语言】指针增减
int *pa = NULL; ; printf("%x\n", pb); char *pca = NULL; ; printf("%x\n", pcb); s ...
jsp/el和jstl动态页面
一.JSP技术 1．jsp脚本和注释 jsp脚本: 1)<%java代码%> ----- 内部的java代码翻译到service方法的内部 2)<%=java变量或表达式> - ...
bottle框架学习(1):命令行
在最初的一段代码,内容如下: if __name__ == '__main__': from optparse import OptionParser _cmd_parser = OptionPars ...
Android_html5交互弹框localstorage 存值整体案例
经历2周多的时间终于是完成了还算可以的android 整体案例了,分享下给大家也希望自己有时间回过头来看看当初研究android的纠结心情.痛苦的经历是开发android 大部分都是在网上找解决 ...
手机估值计算的jquery代码
<script type="text/javascript"> $('#inquiry').click(function(){ var total=0; var cou ...

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

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

随机推荐

热门专题