工作笔记
记事本 eDiary、editplus、UltraEdit
Dreamweaver
模糊查询
String hql = "from Asjdj t where cjzssbmid=:jgid "; :jgid表示jdid是参数
map.put("jgid", getLoginuser().getSysUsers().getJgid());
if (StringUtils.isNotBlank(ajtxbh)) { ajtxbh不为空
hql = hql + "and t.ajtxbh like :ajtxbh "; 模糊查询
map.put("ajtxbh", "%" + ajtxbh + "%"); 模糊查询的参数形式
数据库时间处理
fasj1 与fasj2是String类型
if(StringUtils.isNotBlank(fasj1)&&StringUtils.isNotBlank(fasj2)){
hql = hql + " and t.fasj >=:fasj1 and t.fasj<=:fasj2 "; //可以直接用，不必转换格式
hql_count = hql_count + " and t.fasj >=:fasj1 and t.fasj<=:fasj2 ";
map.put("fasj1", DateUtil.convertStringToTime(fasj1+" 00:00:00"));
map.put("fasj2", DateUtil.convertStringToTime(fasj2+" 23:59:59"));
}
引用
static String date_format="yyyy-MM-dd";
static String datetime_format="yyyy-MM-dd HH:mm:ss";
public static Date convertStringToTime(String strDate)
{
Date theDate = null;
SimpleDateFormat df;
df = new SimpleDateFormat(datetime_format);
if(strDate.indexOf(".")>-1)
strDate=strDate.replaceAll("\\.", "-");
try {
theDate = df.parse(strDate);
} catch (ParseException e) {
e.printStackTrace();
}
return theDate;
}
jsp 时间
导入
WebCalendar.js 插件
发案时间:<span><s:textfield name="fasj1" onclick="SelectDate(this,'yyyy-MM-dd')" readonly="true" size="12">
<s:param name="value"><s:date name="fasj1" format="yyyy-MM-dd"/></s:param>
</s:textfield>至</span>
<span><s:textfield name="fasj2" onclick="SelectDate(this,'yyyy-MM-dd')" readonly="true" size="12" >
<s:param name="value"><s:date name="fasj2" format="yyyy-MM-dd"/></s:param>
</s:textfield></span>
其他格式输入框
<div class="input_s">案件填写编号：<s:textfield name="ajtxbh"/></div>
<div class="input_s">涉案性质： <s:select name="ajsz" list="#{1:'一般',2:'严重'}" listKey="key" listValue="value" headerKey="00" headerValue="涉案性质"></s:select></div>
周报
2013-6-4
suv的添加。
熟悉保卫项目。
熟悉toad for db2 & pd。
对保卫项目添加搜索条目，实现功能。
添加MZTree查找的快速添加
学习MZTree & JfreeChart。
2013-6-5
级联操作 http://succu.blog.163.com/blog/static/19391717420131462547751/
http://www.cnblogs.com/renrenqq/archive/2006/08/16/478198.html
inverse： (默认为false) 标记这个集合作为双向关联关系中的方向一端。
在双向关联时才需要设置。在设为false的一端对cascade进行维护。
处于性能的考虑，一般在数据少的一端或者被依赖端设置inverse="true",
而让数据多的一段维护cascade。
debug模式
MZTREE
http://lion222.iteye.com/blog/579413
http://www.cnblogs.com/wayne-ivan/archive/2008/06/20/1227059.html
弹出新窗口
http://www.cnblogs.com/zhangyi85/archive/2009/09/03/1559594.html
js
第①种
<script language="Javascript"></script>
第②种
<script type="text/javascript"></script>
但是在参考别人的Javascript代码时，却看到<script>里写的不是 type="text/javascript"，而是language="Javascript"。
目前这两种方法都可以表示<script> </script>里的代码是Javascript。然而，language这个属性在W3C的HTML标准中，已不再推荐使用。
虽然这两种引用都没有错，但是，今后我们在制作Web网页的时候，应该使用第②种方法，尽可能的少使用或舍弃第①种方法。
display 标签
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<display:table name="sessionScope.MAP_KEY_OF_SESSION.list" cellspacing="0" cellpadding="0" requestURI="" id="list" class="table" pagesize="${PAGE_SIZE }">
<display:column style="width:30px;text-align:center" title="<div style='width:100%;text-align:center;'><input type='checkbox' id='selectall' name='selectall' onClick='selectAll(\"ids\",this);' style='height:14px;border:none;'/></div>">
<c:if test="${empty list.events.levenStatus }">
<input type="checkBox" name="ids" value="<c:out value='${list.id}'/>" style='border: none' onclick="unselectAll(this)"/></c:if>
</display:column>
<display:column title="姓名" media="html" sortProperty="sjbh" sortable="true">
<a href="javascript:viewExport('<c:out value="${list.id}"/>')">
<c:out value="${list.sjyhxxb.xm}"/></a>
</display:column>
<display:column property="sjyhxxb.xb" title="性别" sortable="true"/>
<display:column property="sjyhxxb.csrq" title="出生日期" sortable="true" decorator="com.web.utils.DisplayUtils"/>
<display:column property="sjyhxxb.zzmm" title="政治面貌" sortable="true"/>
<display:column property="sjyhxxb.rwsj" title="入伍时间" sortable="true" decorator="com.web.utils.DisplayUtils"/>
<display:column property="sjyhxxb.rdtsj" title="入党(团)时间" sortable="true" decorator="com.web.utils.DisplayUtils"/>
<display:column property="events.levenStatus1" title="到达层级" sortable="true"/>
<display:column property="events.levenStatus2" title="审批状态" sortable="true"/>
</display:table>
MzTreeView 与复选框
http://www.haogongju.net/art/750830
http://www.itlead.com.cn/article/html/148/2011-11-08/content-5269.shtml
http://blog.eastmoney.com/fk/blog_120173405.html
http://blog.csdn.net/linxinghui/article/details/4904859
http://blog.csdn.net/lee576/article/details/3209649
http://blog.sina.com.cn/s/blog_4a9f789a0100hq0b.html
function view(id,source){
var arr=source.split(";");
var arr2=arr[1].split(":");
var source1=arr2[1];
if(window.dialogArguments){
var callBack=window.dialogArguments;
callBack(id,source1);
window.close();
}else view1(id);
}
function view1(id){
alert("view1");
var time =new Date();
window.showModalDialog("<%=request.getContextPath()%>/sys/departmentAction_edit.action?id="+id+"&time="+time,"","dialogLeft:300px;dialogTop:100px;dialogHeight=500px;dialogwidth=900px;status=no");
}
弹出一个html窗口
document.write("");
往iframe中添加一个页面
<iframe frameborder="0" id="content" name="content" scrolling="auto" src="" style="HEIGHT: 420px; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 2;"></iframe>
window.frames["content"].location="<%=request.getContextPath()%>/sys/departmentAction_transferedit.action?id="+id+"&time="+time+"&source="+source1;
参考 http://www.jb51.net/article/23620.htm
二、jsp引用文件的两种方式：
1.在jsp中我们引入文件一般形式为这样：
<script type="text/javascript" src="<%=path %>/jsp/phone/notice/noticeList.js"></script><!--绝对路径-->
<script type="text/javascript" src="jsp/phone/notice/noticeList.js"></script><!--相对路径-->
可以看出jsp默认的访问路径可以直接使用相对路径，因为jsp头部已经引用了<base href="<%=basePath%>"/>
2.path和basePath，我的java工程为b2cPlatform，所以：
<%=path%>:/b2cPlatform
<script type="text/javascript" src="<%=path%>/javascript/public.js"></script>
<%=basePath%>:http://localhost:8082/b2cPlatform/
路径问题
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
比如：
< %=path%> /test
< %=basePath%> http://localhost:8080/test/
<head>
<base href="<%=basePath%>">
访问路径问题
<%=request.getContextPath()%>/sys/departmentAction_edit.action
c标签
<%@ taglib rui=”http://java.sun.com/jsp/jstl/core” prefix=”c” %>
1.<c:out>
用于计算一个表达式并将结果输出。类似于 JSP 中 <%=%> 表达式，或者是 EL 中 $ ${el-expression} 。
<script language="JavaScript" src="<c:url value='/MzTreeView10/MzTreeView14.js'/>"></script>
window.location.href 扩展
关于js中"window.location.href"、"location.href"、"parent.location.href"、"top.location.href"的用法
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
举例说明：
如果A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js这样写
"window.location.href"、"location.href"：D页面跳转
"parent.location.href"：C页面跳转
"top.location.href"：A页面跳转
如果D页面中有form的话,
<form>: form提交后D页面跳转
<form target="_blank">: form提交后弹出新页面
<form target="_parent">: form提交后C页面跳转
最重要的是window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面(Response.Redirect无法达到，至少我没有发现)：
如：index.htm页面中有二个框架，分别为 frameLeft和frameRight，在frameRight页面中执行服务器端代码后刷新frameLeft中的页面。
先前最常见的是注册之后，自动刷新登陆框，让登陆框换成已登陆页面，只要在注册成功的代码之后加上一段，即可以实现刷新另个框架的页面。代码如下：
Response.Write("< script language=javascript>alert('恭喜您，注册成功！')< /script>");
Response.Write("< script language=javascript>window.parent.frameLeft.location.href='main.html'< /script>");
[JS]window.location.href和window.location.replace的区别
总是在资料上看到 window.location.href和window.location.replace的区别，但是不是很明白，今天彻底明白了。简单说说：
有3个jsp页面（1.jsp, 2.jsp, 3.jsp），进系统默认的是1.jsp ，当我进入2.jsp的时候， 2.jsp里面用window.location.replace("3.jsp"
;与用window.location.href("3.jsp");从用户界面来看是没有什么区别的，但是当3.jsp页面有一个“返回”按钮，
调用window.history.go(-1);wondow.history.back();方法的时候，
一点这个返回按钮就要返回2.jsp页面的话，区别就出来了，
当用window.location.replace("3.jsp");连到3.jsp页面的话，
3.jsp页面中的调用window.history.go(-1);wondow.history.back();
方法是不好用的，会返回到1.jsp 。当用window.location.href("3.jsp")；
连到3.jsp页面的话，3.jsp页面中的调用window.history.go(-1);wondow.history.back();
方法是好用的，会返回2.jsp。因为window.location.replace("3.jsp");
是不向服务器发送请求的跳转，而window.history.go(-1);wondow.history.back();
方法是根据服务器记录的请求决定该跳到哪个页面的，所以会跳到系统默认页面1.jsp 。
window.location.href("3.jsp");是向服务器发送请求的跳转，
window.history.go(-1);wondow.history.back();
方法是根据服务器记录的请求决定该跳到哪个页面的，所以就可以返回到2.jsp。
jfreechar实例
http://blog.csdn.net/tffits/article/details/7514545
Map、list、session==存储类
http://zhidao.baidu.com/question/190463090.html
JS
<input type="button" value="保存" onclick=" doSomething()"/> 无分号
新手该怎么学习DIV+CSS网页标准布局?
http://www.aa25.cn/
tree查询 返回参数
function getResultsj(ret,source){
if(ret!=null&&ret!=''&&source!=null&&source!=''){
setValue("sjdep",ret);
setValue("sjname",source);
}
}
function openDepartmentsTree(){
var time =new Date();
return window.showModalDialog("<%=request.getContextPath()%>/system/selectDepartments.jsp?time="+time,getResult,"dialogLeft:200px;dialogTop:150px;dialogHeight=500px;dialogwidth=1000px;status=no");
}
another
function doSomething(){
var callBack=window.parent.dialogArguments;// getResultsj方法
callBack();
window.parent.close();
}
检测浏览器机器版本
<html>
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("浏览器名称："+ browser)
document.write("<br />")
document.write("浏览器版本："+ version)
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
document.write("<p>浏览器：")
document.write(navigator.appName + "</p>")
document.write("<p>浏览器版本：")
document.write(navigator.appVersion + "</p>")
document.write("<p>代码：")
document.write(navigator.appCodeName + "</p>")
document.write("<p>平台：")
document.write(navigator.platform + "</p>")
document.write("<p>Cookies 启用：")
document.write(navigator.cookieEnabled + "</p>")
document.write("<p>浏览器的用户代理报头：")
document.write(navigator.userAgent + "</p>")
</script>
</body>
</html>
浏览器全部信息
<html>
<body>
<script type="text/javascript">
var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("<br />");
document.write("MinorVersion=" + x.appMinorVersion);
document.write("<br />");
document.write("Name=" + x.appName);
document.write("<br />");
document.write("Version=" + x.appVersion);
document.write("<br />");
document.write("CookieEnabled=" + x.cookieEnabled);
document.write("<br />");
document.write("CPUClass=" + x.cpuClass);
document.write("<br />");
document.write("OnLine=" + x.onLine);
document.write("<br />");
document.write("Platform=" + x.platform);
document.write("<br />");
document.write("UA=" + x.userAgent);
document.write("<br />");
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("<br />");
document.write("SystemLanguage=" + x.systemLanguage);
document.write("<br />");
document.write("UserLanguage=" + x.userLanguage);
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
{alert("您的浏览器够先进了！")}
else
{alert("是时候升级您的浏览器了！")}
}
</script>
</head>
<body onload="detectBrowser()">
</body>
</html>
cookie
//已写好的获取cookie的函数
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function getCookie(c_name){
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
cookie是什么：cookie是window.document的一个对象,可以在本地保存一些数据。
语法：
1，设置cookie:
document.cookie = "key1=value1 ; key2=value2";
设置value时可先用escape(value1)处理一下，取值时unescape()处理。
2，从cookie中取值：
判断是否设置cookie : document.cookie.length>0
判断cookie中是否有key1：var index= document.cookie.indexOf("key1=") (!=-1)
计算key1的开始位置：k_start=index + "key1".length+1
计算结束位置：k_end=document.cookie.indexOf(";",k_start)
if (k_end==-1){ c_end=document.cookie.length}
最后结果：var value = document.cookie.substring(k_start,k_end) //得到value1 可用unescape()处理
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
substring
substring(参数)是java中截取字符串的一个方法
有两种传参方式
一种是public String substring(int beginIndex)
返回一个新的字符串，它是此字符串的一个子字符串。该子字符串从指定索引处的字符开始，直到此字符串末尾。
另一种是public String substring(int beginIndex, int endIndex)
返回一个新字符串，它是此字符串的一个子字符串。该子字符串从指定的 beginIndex 处开始，直到索引 endIndex - 1 处的字符。因此，该子字符串的长度为 endIndex-beginIndex。
详情请参考API java.lang.String
至于LZ说的
String subString；
subString=number.subString（i，i+1）；
定义一个String类型的变量去存储number截取第i个位置到第i+1个位置的字符串
笼统说就是 我们去截取number的第i个到第i+1个的字符，然后赋值给String类型的变量subString
indexOf
它所查出来的是你给的母字符串(也就是str)中某一个字符的下标位置，比如第一个Hello在
Hello world中 Hello的第一个字符H在第一位，因为从0开始算的，所以输出0。
JavaScript 的图像映射
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14"
onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10"
onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260"
onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body>
</html>
简单的计时
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 秒！')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示定时的警告框" onClick = "timedMsg()">
</form>
<p>请点击上面的按钮。警告框会在 5 秒后显示。</p>
</body>
</html>
一直计时
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>
停止按钮
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时，并将计数重置为 0。</p>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',1000)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
字符串样式
txt.length
document.write(txt.length)
<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")
document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")
document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")
document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")
document.write("<p>Subscript: " + txt.sub() + "</p>")
document.write("<p>Superscript: " + txt.sup() + "</p>")
document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
</script>
</body>
</html>
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
0
-1
6
查找字符串中特定的字符，若找到，则返回该字符 - match() 方法
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3School"))
Visit W3School!
document.write(Date())
var d=new Date();
document.write("从 1970/01/01 至今已有：" + d.getTime() + " 毫秒。");
数组元素组成字符串
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
focus 当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件，或者如果设置了 function 参数，
该函数也可规定当发生 blur 事件时执行的代码。
<html>
<head>
<style type="text/css">
a:active {color:green}
</style>
<script type="text/javascript">
function getfocus()
{document.getElementById('myAnchor').focus()}
function losefocus()
{document.getElementById('myAnchor').blur()}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.w3school.com.cn">访问 W3School.com.cn</a>
<br /><br/>
<input type="button" onclick="getfocus()" value="获得焦点">
<input type="button" onclick="losefocus()" value="失去焦点">
</body>
</html>
确定点击鼠标的哪个键
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
{
alert("您点击了鼠标右键！")
}
else if(btnNum==0)
{
alert("您点击了鼠标左键！")
}
else if(btnNum==1)
{
alert("您点击了鼠标中键！");
}
else
{
alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>
</html>
光标的坐标
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
</html>
确定键盘键
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p>
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>
</html>
shift键是否按下
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("The shift key was pressed!")
}
else
{
alert("The shift key was NOT pressed!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p>
</body>
</html>
在文档中点击某个位置。消息框会提示出您所点击的标签的名称。
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function getEventType(event)
{
alert(event.type);
}
</script>
</head>
<body onmousedown="getEventType(event)">
<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>
</body>
</html>
form
<html>
<head>
<script type="text/javascript">
function changeAction()
{
var x=document.getElementById("myForm")
alert("Original action: " + x.action)
x.action="/htmldom/index.asp"
alert("New action: " + x.action)
x.submit()
}
</script>
</head>
<body>
<form id="myForm" action="/i/eg_smile.gif">
名称：<input type="text" value="米老鼠" />
<input type="button" onclick="changeAction()"
value="改变 action 属性并提交表单" />
</form>
</body>
</html>
var x=document.getElementById("myForm")
alert(x.method)//post or get
提示按钮的 id 和 类型 + 禁用按钮
<html>
<head>
<script type="text/javascript">
function alertId()
{
var txt="Id: " + document.getElementById("myButton").id
txt=txt + ", type: " + document.getElementById("myButton").type
alert(txt)
document.getElementById("myButton").disabled=true
}
</script>
</head>
<body>
<form>
<button id="myButton" onClick="alertId()">请点击我！</button>
</form>
</body>
</html>
Checkbox - 把文本转换为大写
<html>
<head>
<script type="text/javascript">
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase()
}
</script>
</head>
<body>
<form name="form1">
名：<input type="text" id="fname" size="20" />
<br /><br />
姓：<input type="text" id="lname" size="20" />
<br /><br />
转换为大写
<input type="checkBox" onclick="if (this.checked) {convertToUcase()}">
</form>
</body>
</html>
使用单选按钮中的 value 属性
<html>
<head>
<script type="text/javascript">
function check(browser)
{
document.getElementById("answer").value=browser
}
</script>
</head>
<body>
<p>您喜欢哪款浏览器？</p>
<form>
<input type="radio" name="browser" onclick="check(this.value)" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Opera">Opera<br />
<br />
您喜欢的浏览器是：<input type="text" id="answer" size="20">
</form>
</body>
</html>
重置表单
<html>
<head>
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset()
}
</script>
</head>
<body>
<p>在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。</p>
<form id="myForm">
姓名：<input type="text" size="20"><br />
年龄：<input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="重置">
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function formSubmit()
{
document.getElementById("myForm").submit()
}
</script>
</head>
<body>
<p>在下面的文本框中输入一些文本，然后点击提交按钮就可以提交表单。</p>
<form id="myForm" action="/i/eg_smile.gif" method="get">
名：<input type="text" name="firstname" size="20"><br />
姓：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="提交">
</form>
</body>
</html>
选取文本域中的内容
<html>
<head>
<script type="text/javascript">
function selText()
{
document.getElementById("myText").select()
}
</script>
</head>
<body>
<form>
<input size="25" type="text" id="myText" value="选定我吧！">
<input type="button" value="选择文本" onclick="selText()">
</form>
</body>
</html>
表单中的下拉列表
<html>
<head>
<script type="text/javascript">
function favBrowser()
{
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</script>
</head>
<body>
<form>
请选择您喜欢的浏览器：
<select id="myList" onchange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
<p>您喜欢的浏览器是：<input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>
下拉表
<html>
<head>
<script type="text/javascript">
function moveNumbers()
{
var no=document.getElementById("no")
var option=no.options[no.selectedIndex].text
var txt=document.getElementById("result").value
txt=txt + option
document.getElementById("result").value=txt
}
</script>
</head>
<body>
<form>
请选择数字：<br />
<select id="no">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" onclick="moveNumbers()" value="-->">
<input type="text" id="result" size="20">
</form>
</body>
当达到文本域的最大字符数时跳至下一个域
<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.size)
{
var next=x.tabIndex
if (next<document.getElementById("myForm").length)
{
document.getElementById("myForm").elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="4" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="5" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
</body>
</html>
可调整大小和不可调整大小的框架
<html>
<frameset cols="30%,70%">
<frame id="leftFrame" src="/example/hdom/frame_noresize.html">
<frame id="rightFrame" src="/example/hdom/frame_a.html">
</frameset>
</html>
跳出框架
<html>
<head>
<script type="text/javascript">
function breakout()
{
if (window.top!=window.self)
{
window.top.location="/example/hdom/tryjs_breakout.htm"
}
}
</script>
</head>
<body>
<input type="button" onclick="breakout()" value="跳出框架！">
</body>
</html>
把用户带到一个新的地址
<html>
<head>
<script type="text/javascript">
function currLocation()
{
alert(window.location)
}
function newLocation()
{
window.location="/index.html"
}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的 URL">
<input type="button" onclick="newLocation()" value="改变 URL">
</body>
</html>
重新加载页面
<html>
<head>
<script type="text/javascript">
function reloadPage()
{
window.location.reload();
}
</script>
</head>
<body>
<input type="button" value="重新加载页面" onclick="reloadPage()" />
</body>
</html>
启用 禁用列表
<html>
<head>
<script type="text/javascript">
function disable()
{
document.getElementById("mySelect").disabled=true
}
function enable()
{
document.getElementById("mySelect").disabled=false
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br /><br />
<input type="button" onclick="disable()" value="禁用列表">
<input type="button" onclick="enable()" value="启用列表">
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function getLength()
{
alert(document.getElementById("mySelect").length)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onclick="getLength()" value="在这个列表中，有多少选项？">
</form>
</body>
</html>
<script type="text/javascript">
function changeSize()
{
document.getElementById("mySelect").size=1
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onclick="changeSize()" value="改变大小">
</form>
<html>
<head>
<script type="text/javascript">
function selectMultiple()
{
document.getElementById("mySelect").multiple=true
}
</script>
</head>
<body>
<form>
<select id="mySelect" size="4">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onclick="selectMultiple()" value="选择多个">
</form>
<p>在您点击 “选择多个” 按钮之前，请尝试同时选取多个选项。在点击 “选择多个” 按钮之后，请再试一次。</p>
输出下拉框的所有文本
<html>
<head>
<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
var y="";
for (i=0;i<x.length;i++)
{
y+=x.options[i].text;
y+="<br />";
}
document.write(y);
}
</script>
</head>
<body>
<form>
请选择您喜欢的水果：
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br /><br />
<input type="button" onclick="getOptions()" value="输出所有选项">
</form>
</body>
</html>
取得下拉列表中所选的选项的索引位置
<html>
<head>
<script type="text/javascript">
function alertIndex()
{
var x=document.getElementById("mySelect").selectedIndex;
var y=document.getElementsByTagName("option");
alert(y[x].text + " has the index of: " + y[x].index);
}
</script>
</head>
<body>
<form>
请选择您喜欢的水果：
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br />
<br />
<input type="button" onclick="alertIndex()" value="显示被选水果的 index">
</form>
</body>
</html>
从下拉列表中删除选项
<html>
<head>
<script type="text/javascript">
function removeOption()
{
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onclick="removeOption()" value="删除被选的选项">
</form>
</body>
</html>
检测有关客户机的屏幕的细节
<html>
<body>
<script type="text/javascript">
document.write("Screen resolution: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("Available view area: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
document.write("Color depth: ")
document.write(screen.colorDepth)
document.write("<br />")
document.write("Buffer depth: ")
document.write(screen.bufferDepth)
document.write("<br />")
document.write("DeviceXDPI: ")
document.write(screen.deviceXDPI)
document.write("<br />")
document.write("DeviceYDPI: ")
document.write(screen.deviceYDPI)
document.write("<br />")
document.write("LogicalXDPI: ")
document.write(screen.logicalXDPI)
document.write("<br />")
document.write("LogicalYDPI: ")
document.write(screen.logicalYDPI)
document.write("<br />")
document.write("FontSmoothingEnabled: ")
document.write(screen.fontSmoothingEnabled)
document.write("<br />")
document.write("PixelDepth: ")
document.write(screen.pixelDepth)
document.write("<br />")
document.write("UpdateInterval: ")
document.write(screen.updateInterval)
document.write("<br />")
</script>
</body>
</html>
表格
<html>
<head>
<script type="text/javascript">
function aboveFrames()
{
document.getElementById('myTable').frame="above"
}
function belowFrames()
{
document.getElementById('myTable').frame="below"
}
function padding()
{
document.getElementById('myTable').cellPadding="15"
}//内边距
function spacing()
{
document.getElementById('myTable').cellSpacing="15"
}//外边距
function changeBorder()
{
document.getElementById('myTable').border="10"
}//边框线
function rowRules()
{
document.getElementById('myTable').rules="rows"
}//显示行边距
function colRules()
{
document.getElementById('myTable').rules="cols"
}//显示列边距
function showRow()
{
alert(document.getElementById('myTable').rows[0].innerHTML)
}显示第一行的innerHTML
function cell()
{
var x=document.getElementById('myTable').rows[0].cells;
alert(x[0].innerHTML);
}//显示一个单元的内容
function createCaption()
{
var x=document.getElementById('myTable').createCaption()
x.innerHTML="我的表格标题"
}//为表格创建标题
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex
document.getElementById('myTable').deleteRow(i)
}//<tr>
// <td>Row 1</td>
// <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
//</tr> 删除一行
function insRow()
{
var x=document.getElementById('myTable').insertRow(0)
var y=x.insertCell(0)
var z=x.insertCell(1)
y.innerHTML="NEW CELL1"
z.innerHTML="NEW CELL2"
}//插入行
function leftAlign()
{
document.getElementById('header').align="left";
}//对其行中的文本<tr id="header"><th>名</th><th>姓</th></tr>
function topAlign()
{
document.getElementById('tr2').vAlign="top";
}//垂直对齐行中的单元格内容
/**
<tr id="tr1">
<th>名</th>
<th>姓</th>
<th>文本</th>
</tr>
<tr id="tr2">
<td>John</td>
<td>Adams</td>
<td>你们好。我是名字是 John Adams。
在本例中，我需要一段长的文本。
在本例中，我需要一段长的文本。
在本例中，我需要一段长的文本。</td>
</tr>
*/
function alignCell()
{
document.getElementById('td1').align="right"
}//对其单元格中的内容
function topAlign()
{
document.getElementById('td1').vAlign="top";
document.getElementById('td2').vAlign="top";
document.getElementById('td3').vAlign="top";
}//垂直对其单元格中的内容
function changeColSpan()
{
document.getElementById("td1").colSpan="2";
}//更改表元横跨的列数
</script>
</script>
</head>
<body>
<table id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="aboveFrames()" value="显示上边框">
<input type="button" onclick="belowFrames()" value="显示下边框">
</body>
</html>
window
确认框
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
提示框
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
{
document.write("你好，" + name + "！今天过得好吗？")
}
}
打开窗口，控制外观
function open_win()
{
window.open("http://www.w3school.com.cn","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
}
打印页面
function printpage()
{
window.print()
}
滚动文本
function scrollWindow()
{
window.scrollBy(100,100);
}
&&
<input type="button" onclick="scrollWindow()" value="滚动" />
滚动到指定位置
function scrollWindow()
{
window.scrollTo(100,500)
}
分享到：
发表评论
相关推荐
工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记工作笔记
ORACLE DBA工作笔记 运维数据迁移与性能调优 清晰版 。。。
源码+原型+数据库 工作笔记管理系统源码+原型+数据库 工作笔记管理系统源码+原型+数据库 工作笔记管理系统源码+原型+数据库 工作笔记管理系统源码+原型+数据库 工作笔记管理系统源码+原型+数据库 工作笔记管理系统...
我的工作笔记我的工作笔记我的工作笔记我的工作笔记我的工作笔记
网管工作笔记之故障诊断排除专辑,很不错的技术学校资料
金蝶EAS-BOS工作笔记：150+个BOS开发过程中可能遇到的问题及解答！
Apache Web服务器配置与使用工作笔记
[Apache服务器配置与使用工作笔记].pdf 个人收集电子书，仅用学习使用，不可用于商业用途，如有版权问题，请联系删除！
Apache服务器配置与使用工作笔记.pdf 个人收集电子书，仅用学习使用，不可用于商业用途，如有版权问题，请联系删除！
《Apache服务器配置与使用工作笔记》详细介绍了新版本的Apache服务器软件的安装、配置与管理，通过这些介绍，读者能快速地将Apache运用到工作中。在每个章节后附有常见问题解答（FAQ），帮助读者解决一些在Apache...
apache 服务器配置与使用工具书。[Apache服务器配置与使用工作笔记].王江伟.扫描版
《Apache服务器配置与使用工作笔记》.(王江伟).[PDF].&ckook;
上传一份自己从学习到工作整理出来的android的笔记，会不断更新，希望对初学者有用
Java工作笔记 从网上下载的，比较好，转载一下
苹果ios开发一年的工作笔记 退回输入键盘 - (BOOL) textFieldShouldReturn:(id)textField{ [textField resignFirstResponder]; } CGRect CGRect frame = CGRectMake (origin.x, origin.y, size.width, size....
本人08年工作 真正开始做电子是从12年开始，工作笔记记载个人工作中需要记忆的一些知识
工作之余写的C语言工作笔记——含大量图片，血泪教程，很多都是用了整天时间才解决的问题
MTK工作笔记.doc MTK工作笔记.doc MTK工作笔记.doc