BlogJava-少年阿宾-随笔分类-Javascript

JavaScript 函数定义方式

abin — Fri, 06 Sep 2013 05:44:00 GMT

第一种：最基本的作为一个本本分分的函数声明使用。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

Validate Page

function validate(abin){
    var lee=function(parameter){
        return 'hello,'+abin;
    }(abin);
    document.getElementById("spanId").innerHTML=lee;
}

第二种：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
http://www.w3.org/TR/html4/loose.dtd">

Validate Page

第三种：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
http://www.w3.org/TR/html4/loose.dtd">

Validate Page

abin 2013-09-06 13:44 发表评论

指定时间加载图片，加载不出来就显示文字

abin — Wed, 31 Jul 2013 06:33:00 GMT

abin 2013-07-31 14:33 发表评论

js中控制checkbox的选择以及table的显示与隐藏

abin — Thu, 30 Aug 2012 11:50:00 GMT

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

    function checkAll() {
        var m = document.getElementsByName("all")[0];
        var s = document.getElementsByName("check");

        if (m.checked) {

            for ( var i = 0; i < s.length; i++) {
                s[i].checked = true;
            }
        } else {
            for ( var i = 0; i < s.length; i++) {
                s[i].checked = false;
            }

        }
    }

    function checkEvery() {
        var m = document.getElementsByName("all")[0];
        var s = document.getElementsByName("check");

        for ( var i = 0; i < s.length; i++) {
            if (s[i].checked&&m.checked) {
                m.checked = true;
            } else {
                m.checked = false;
            }
        }

    }

    function turn() {
        with (document) {
            var m = getElementById("change");
            var n = getElementById("table");
            if (m.value == "收缩") {
                n.style.display = "none";
                m.value = "展开";
            } else {
                n.style.display = "block";
                m.value = "收缩";
            }
        }
    }



            全选
                            onclick="turn();">


    <%
        int number = Integer.parseInt(request.getParameter("number"));
    %>


        <%
            for (int i = 0; i < number; i++) {
        %>


            <%=i%>

        <%
            }
        %>

abin 2012-08-30 19:50 发表评论

js获取复选框的值，及小技巧

abin — Thu, 30 Aug 2012 09:45:00 GMT

1
2
3
4
5
6

如果需要将复选框选中的值操作，可在循环里面加字符串拼接，每个用逗号隔开，在js里页面跳转，凭借的字符串如果是数组，作为url传递的参数，接手后不是数组，是字符串形式的，只要用函数分割就ok了。

abin 2012-08-30 17:45 发表评论

javascript实现表格动态增加删除(二)

abin — Tue, 28 Aug 2012 15:55:00 GMT

http://www.w3.org/TR/html4/loose.dtd">

javascript实现表格动态增加删除

abin 2012-08-28 23:55 发表评论

javascript实现表格动态增加

abin — Tue, 28 Aug 2012 15:24:00 GMT

http://www.w3.org/TR/html4/loose.dtd">

javascript实现表格动态增加

NAME

AGE

abin 2012-08-28 23:24 发表评论

javascript实现表格动态增加删除(一)

abin — Tue, 28 Aug 2012 15:21:00 GMT

http://www.w3.org/TR/html4/loose.dtd">

javascript实现表格动态增加删除

NAME

AGE

OPERATE

abin 2012-08-28 23:21 发表评论

js动态创建，删除表格

abin — Tue, 28 Aug 2012 13:20:00 GMT

生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号

方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。

方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。

方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串

方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。

运行时间比较:

方法	运行时间(ms)
方法一	93037
方法二	3341
方法三	2795
方法四	500

具体的程序如下：

test page

原文出处：http://abaper.blogbus.com/logs/8278500.html
、

动态删除表格

方法1：

第1行	删除本行
第2行	删除本行

方法2：

第1行	删除本行
第2行	删除本行

分享到：

abin 2012-08-28 21:20 发表评论

dwr3实现消息精确推送详细步骤

abin — Sat, 07 Jul 2012 07:10:00 GMT

这几天做项目，需要一个消息提醒功能，决定用dwr实现，在dwr官网和网上找了很多资料，也没实现精准推送，大多数的例子具体步骤写的不清楚，不怎么了解dwr的人看了也未必能看懂，反正我是没看懂，那时就决定，若自己实现了，一定将具体步骤写下来，希望能给那些和我一样的人一些帮助，若有不明白的，可以给小弟留言。我只写步骤，不写原理，下面开始。

第一、在项目中引入dwr.jar，然后在web.xml中进行配置，配置如下：

dwr-invoker

org.directwebremoting.servlet.DwrServlet

crossDomainSessionSecurity

false

allowScriptTagRemoting

true

classes

java.lang.Object

activeReverseAjaxEnabled

true

initApplicationScopeCreatorsAtStartup

true

maxWaitAfterWrite

3000

debug

true

logLevel

WARN

第二：在web.xml的同级目录下新建dwr.xml文件，内容如下

"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"

"http://getahead.org/dwr/dwr30.dtd">

这个是dwr的基本配置，MessagePush在页面的javascript中使用，com.huatech.messageremind.service.MessagePush实现了想要调用的方法，MessagePush我觉得就相当于java类中的一个映射，在javascript中使用MessagePush.java类中实现的方法，即可在dwr中调用。

第三，要想使用dwr，还要在你想要推送的页面中引入script，

可以看见，也引入了dwr.xml中配置的javascript，engine.js和util.js是必须引入的。

以上三点都是基本配置，没什么好说的，想使用dwr，就得这么做。

第四，实现消息的精准推送

消息推送简单，但是想实现精准推送就需要做一些别的操作了

1 在任何一个用户登录的时候，都需要将其userId或者其他唯一性标识放入session中，我放的是userId，

这里就以 userId为唯一性标识。

2 在载入想推送的页面时，需要onload一个我在MessagePush类中实现的方法，当然了，需要使用dwr调用

js的调用方法如下：

function onPageLoad(){

var userId = '${userinfo.humanid}';

MessagePush.onPageLoad(userId);

}

onload中的三个函数都是必须的，其中dwr.engine.setActiveReverseAjax(true);dwr.engine.setNotifyServerOnPageUnload(true);是dwr中的函数。

MessagePush类中实现的方法如下：

public void onPageLoad(String userId) {

ScriptSession scriptSession = WebContextFactory.get().getScriptSession();

scriptSession.setAttribute(userId, userId);

DwrScriptSessionManagerUtil dwrScriptSessionManagerUtil = new DwrScriptSessionManagerUtil();

try {

dwrScriptSessionManagerUtil.init();

} catch (ServletException e) {

e.printStackTrace();

}

大家注意到，onPageLoad方法中还有一个名为DwrScriptSessionManagerUtil的类，该类如下实现：

public class DwrScriptSessionManagerUtil extends DwrServlet{

private static final long serialVersionUID = -7504612622407420071L;

public void init()

throws ServletException {

Container container = ServerContextFactory.get().getContainer();

ScriptSessionManager manager = container

.getBean(ScriptSessionManager.class);

ScriptSessionListener listener = new ScriptSessionListener() {

public void sessionCreated(ScriptSessionEvent ev) {

HttpSession session = WebContextFactory.get().getSession();

String userId =((User) session.getAttribute("userinfo")).getHumanid()+"";

System.out.println("a ScriptSession is created!");

ev.getSession().setAttribute("userId", userId);

}

public void sessionDestroyed(ScriptSessionEvent ev) {

System.out.println("a ScriptSession is distroyed");

}

};

manager.addScriptSessionListener(listener);

}

第四步是最最重要的，为了第四步我研究了两天多，下面开始消息推送。

第五、消息推送

在你想要推送消息的时候，调用如下方法：

public void sendMessageAuto(String userid,String message) {

final String userId = userid ;

final String autoMessage = message;

Browser.withAllSessionsFiltered(new ScriptSessionFilter() {

public boolean match(ScriptSession session) {

if (session.getAttribute("userId") == null)

return false;

else

return (session.getAttribute("userId")).equals(userId);

}

}, new Runnable(){

private ScriptBuffer script = new ScriptBuffer();

public void run() {

script.appendCall("showMessage", autoMessage);

Collection sessions = Browser

.getTargetSessions();

for (ScriptSession scriptSession : sessions) {

scriptSession.addScript(script);

}

});

}

userid即为你想推给消息的人，message为你想推送的消息，大家注意到这里script.appendCall("showMessage", autoMessage);

其中showMessage为在想推送的页面中的javascript方法，autoMessage是这个方法的参数，这样那个页面就能得到推送的内容了，至于如何展现，就看你的需要了。

至此，一个dwr消息精准推送的步骤就写完了，其实很多东西都不难，只是我们不知道该怎么用而已。

abin 2012-07-07 15:10 发表评论

js实现checkbox全选，反选，全不选

abin — Sat, 07 Jul 2012 04:45:00 GMT

<%@ page language="java" contentType="text/html; charset=utf-8"
   pageEncoding="utf-8"%>

js实现checkbox全选，反选，全不选


   全选
           onclick="uncheckAll('test')" /> 全不选
           onclick="switchAll('test')" /> 反选


        复选框1

       复选框2

       复选框3

       复选框4

       复选框5

       复选框6

abin 2012-07-07 12:45 发表评论

提交checkbox的值到servlet

abin — Sat, 07 Jul 2012 04:44:00 GMT

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>

js test

abs

   CheckValue
   org.abin.lee.servlet.CheckValue

   CheckValue
   /CheckValue

    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp

package org.abin.lee.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CheckValue extends HttpServlet{
   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp)
           throws ServletException, IOException {
       String[] value=req.getParameterValues("checkbox");
       for(int i=0;i           System.out.println("第"+i+"个："+value[i]);
       }

   }
}

abin 2012-07-07 12:44 发表评论

checkbox实现全选的多种方法

abin — Sat, 07 Jul 2012 04:41:00 GMT

abin 2012-07-07 12:41 发表评论