Dojo JavaScript实现消息滚动出现效果

来源：互联网发布：电信端口限制破解编辑：程序博客网时间：2024/06/06 02:42

介绍

这种效果说的就是类似状态监视器一样的应用。实时更新后台或某个监控点的状态消息。主要采用的技术就是定时器和滚动定位。

代码示例

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head><style type="text/css">@import "../js/dijit/themes/tundra/tundra.css";@import "../css/main.css";</style></head><body class="tundra"><div data-dojo-type="dijit.layout.BorderContainer"style="width: 100%; height: 100%; margin: 0px; padding: 0px; "><div data-dojo-type="dojox.layout.ContentPane"data-dojo-props="region:'top'"style="height:38px;width:100%;background-color: black; color: white;font-family: arial;font-size: 28px;">消息监视器</div><div data-dojo-type="dojox.layout.ContentPane"data-dojo-props="region:'center', splitter: true"style="width: 100%; height: 100%; border: none; padding: 0px; background-color: #ffffff;"><div style="width: 99%; margin: -3px 0px -2px 2px;"><button id="start_btn" data-dojo-type="dijit.form.Button"class="menu_button" type="button">开始</button><button id="stop_btn" data-dojo-type="dijit.form.Button"class="menu_button" type="button">停止</button><button id="clear_btn" data-dojo-type="dijit.form.Button"class="menu_button" type="button">清除</button></div><div data-dojo-type="dijit.layout.BorderContainer"data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true"style="width: 100%; height: 100px;"><div data-dojo-type="dojox.layout.ContentPane" style="font-size: 16px;"data-dojo-props="splitter:true,region:'center'"><!-- 为了每次都定位到新加的消息，需要对消息所在的容器设定style --><div id="container" style="height: 100%;overflow: auto;width: 100%;"></div></div></div></div></div><script>dojoConfig = {isDebug : false,parseOnLoad : true,async : true};</script><script type="text/javascript" src="../js/dojo/dojo.js"></script><script>require([ "dojo/parser", "dijit/form/Button", "dijit/layout/BorderContainer", "dojox/layout/ContentPane","dojox/timing/_base"]);</script><script>require([ "dojo/ready",   "dijit/registry",  "dojo/dom",  "dojo/on"  ],function(ready, registry, dom, on) {ready(function() {var container = dom.byId("container");//创建定时器var t = new dojox.timing.Timer();//当点击开始时，触发定时器，更新消息on(registry.byId("start_btn"), "click", function(e){t.setInterval(2000);t.onTick = update;t.start();});//当点击停止时，停止定时器on(registry.byId("stop_btn"), "click", function(e){t.stop();});//当点击清除时，将所有的消息都清空on(registry.byId("clear_btn"), "click", function(e){container.innerHTML = "";});var update = function(){var content = container.innerHTML;container.innerHTML = content + "<div>A new message arrived at " + Date() +"</div>";//确保每次都定位到新加的消息container.scrollTop = container.scrollHeight;};});});</script></body></html>

总结

从这个例子可以看出，做前端应用，往往需要同时掌握HTML、JavaScript、CSS。