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

发布时间：2020-12-16 21:33:20 所属栏目：百科来源：网络整理

导读：介绍这种效果说的就是类似状态监视器一样的应用。实时更新后台或某个监控点的状态消息。主要采用的技术就是定时器和滚动定位。代码示例 %@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%!DOCTYPE htmlhtmlheadstyle

介绍

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

代码示例

<%@ 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"),function(e){
							t.stop();
						});
						
						//当点击清除时，将所有的消息都清空
						on(registry.byId("clear_btn"),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。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!