大佬教程收集整理的这篇文章主要介绍了Dojo JavaScript实现消息滚动出现效果，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这种效果说的就是类似状态监视器一样的应用。实时更新后台或某个监控点的状态消息。主要采用的技术就是定时器和滚动定位。
<%@ 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。
以上是大佬教程为你收集整理的Dojo JavaScript实现消息滚动出现效果全部内容，希望文章能够帮你解决Dojo JavaScript实现消息滚动出现效果所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。