这些日子,一直没有调好心态。对于以后究竟是考研,还是努力的工作,我终于下定决心了。先工作,等在IT公司混不下去了,再看看考研的事。之前决定考研是想通过读研来学到更多的东西,进而能拿到更高的工资;经过这段时间发生的一些事,让我明白,我这样一味盲目的追求使我很不幸福,甚至有点像发疯。在社会上更多的是人与人的交流,技术算是次要的……
今天看看还能不能用javascript的原生态去写一点东西(大学里很熟练的哦,工作一年多都成傻逼了)。发现居然还是写出来了。以下分享一下代码:
1。html界面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax Progress Bar</title> <script type="text/javascript"> var xmlHttp; var key; var bar_color = 'gray'; var span_id = "block"; var clear = " " //创建XMLHttpRequest function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } //两秒中刷新一次滚动条 function goCallback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { setTimeout("pollServer()", 2000); } } } function pollServer() { createXMLHttpRequest(); var url = "servlet/ProgressBarServlet?task=poll&key=" + key; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = pollCallback; xmlHttp.send(null); } //成功时候在界面上刷新滚动条 function pollCallback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var percent_complete = xmlHttp.responseText; //为什么用xmlHttp.responseText获取的服务器返回值会有空格呢 var index = processResult(percent_complete.trim()); for (var i = 1; i <= index; i++) { var elem = document.getElementById("block" + i); elem.innerHTML = clear; elem.style.backgroundColor = bar_color; var next_cell = i + 1; if (next_cell > index && next_cell <= 9) { document.getElementById("block" + next_cell).innerHTML =percent_complete + "%"; } } if (index < 9) { setTimeout("pollServer()", 2000); } else { document.getElementById("complete").innerHTML = "Complete!"; document.getElementById("go").disabled = false; } } } } //更加返回结果的第一位数(比如:50,就是5)来确定进度条目前的进展情况。 function processResult(percent_complete) { var ind; if (percent_complete.length == 1) { ind = 1; } else if (percent_complete.length == 2) { ind = percent_complete.substring(0, 1); } else { ind = 9; } return ind; } function checkDiv() { var progress_bar = document.getElementById("progressBar"); if (progress_bar.style.visibility == "visible") { clearBar(); document.getElementById("complete").innerHTML = ""; } else { progress_bar.style.visibility = "visible" } } function clearBar() { for (var i = 1; i < 10; i++) { var elem = document.getElementById("block" + i); elem.innerHTML = clear; elem.style.backgroundColor = "white"; } } function go() { createXMLHttpRequest(); checkDiv(); var url = "servlet/ProgressBarServlet?task=create"; var button = document.getElementById("go"); button.disabled = true; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = goCallback; xmlHttp.send(null); } </script> </head> <body> <h1> Ajax 滚动条例子 </h1> Launch long-running process: <input type="button" value="Launch" id="go" onclick="go();" /> <p> <table align="center"> <tbody> <tr> <td> <div id="progressBar" style="padding: 2px; border: solid black 2px; visibility: hidden"> <span id="block1"> </span> <span id="block2"> </span> <span id="block3"> </span> <span id="block4"> </span> <span id="block5"> </span> <span id="block6"> </span> <span id="block7"> </span> <span id="block8"> </span> <span id="block9"> </span> </div> </td> </tr> <tr> <td align="center" id="complete"></td> </tr> </tbody> </table> </body> </html>
2。servlet代码
package com.lizw.process; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ProgressBarServlet extends HttpServlet { private int counter = 1; /** * Handles the HTTP <code>GET</code> method. * * * @param request * servlet request * * @param response * servlet response */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String task = request.getParameter("task"); String res = ""; if (task.equals("create")) { res = "<key>1</key>"; counter = 1; } else { String percent = ""; switch (counter) { case 1: percent = "10"; break; case 2: percent = "23"; break; case 3: percent = "35"; break; case 4: percent = "51"; break; case 5: percent = "64"; break; case 6: percent = "73"; break; case 7: percent = "89"; break; case 8: percent = "100"; break; } counter++; res = "<percent>" + percent + "</percent>"; } System.out.println("The res is : "+res); PrintWriter out = response.getWriter(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); out.println("<response>"); out.println(res); out.println("</response>"); out.close(); } }
3.web.xml配置
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>ProgressBarServlet</servlet-name> <servlet-class>com.lizw.process.ProgressBarServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ProgressBarServlet</servlet-name> <url-pattern>/servlet/ProgressBarServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
唉,不能在这家公司傻逼下去了,要换一下了
相关推荐
31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用...
8.超酷带纹理网页滚动条效果.html 9.纯CSS代码实现翻页焦点图效果.html 10.仿豆瓣分页原型.html 11.给放大的分页.html 12.关闭此页面时会提醒你加入书签.html 13.划过链接鼠标变手型.html 14.可供选择大小.html 15....
[ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板,统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP...
它包含多个高级导航组件:预设置数据时间范围,日期选择器、滚动条、平移、缩放功能。 主要优势(功能特点) browsers兼容性 Highstock 可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 ...
除了通过滚动条或导航器控制放大和平移功能,你还可以通过鼠标和手指来进行这两个操作。 ajax方便加载外部数据 Highstock 的数据是 JavaScript 数组或对象,这些数据可以是本地的配置对象,独立的数据文件(JSON、...
内容索引:脚本资源,Ajax/JavaScript,图片切换 纯JS仿做土豆网豆单列表载入图片特效,这里把图片代替了视频,只为演示图片的效果,没有使用第三方的JS插件,因此Javascript代码比较多,参考价值比较高,点小图的时候...
如何保证页面刷新后的滚动条位置 清除网页历史记录,屏蔽后退按钮! 如何传值在2个页面之间 :要求不刷新父页面,并且不能用Querystring传值 Asp.net地址转义(分析)加强版 Web的桌面提醒(Popup) Using the Popup ...
[ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板,统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP...
jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() ... $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数,隐藏所有 <p> 元素。...