JavaWeb视频网站开发：实现首页小喇叭的功能

╰半夏微凉° 2022-04-17 03:39 172阅读 0赞

还记得是在10月初的时候，最开始为鹰城家教网设计了小喇叭的功能，当时的目的很简单，就是想让小喇叭实时广播一些想让用户知道的信息，包括网站动态，比如谁谁谁注册了家教邦，谁谁谁成功预约了教师，以及等等。

后来自我感觉这个小功能不错很有趣，就把它移植到了我的视频网站的首页，为网站的访问者广播网站的动态消息以及小提示等信息，也算为大家带来一点小小的乐趣，自我感觉也算是一个小小的亮点了吧。

![00612.jpg][]

那么今天，就想着借这篇博客来为大家分享一些这个小喇叭的设计思路以及具体的实现，希望大家会喜欢。

小喇叭的实现主要还是靠HTML，css以及js，中间也嵌套了一点Java。

第一步：首先写HTML界面

![00610.jpg][]

第二步：写css来控制小喇叭的样式

/*顶部横幅及小喇叭*/
    .banner{
    	height: 20px;
    	margin-top:20px;
    	margin-left:50px; 
    	color: blue;
    }
    /*小喇叭图片*/
    .banner img{
    	width: 18px;
    	height: 18px;
    }
    /*小喇叭广播文本*/
    .banner span{
    	color: red;
    }

第三步：编写js，让小喇叭每隔5秒随机显示一句话

window.setInterval("change('<%=usenum%>','<%=usertoday%>','<%=visnum%>','<%=vistoday%>');", 5000);
    function change(un,ut,vn,vt){
    	var se=new Array();
    	se[0]="2018年10月12日，“LongBro影院”改名“553影院”!";
    	se[1]="553，是地瓜（俗称红薯）中最好吃的一种。";
    	se[2]="最近一部很火的电影《动物世界》，李易峰主演的哟.";
    	se[3]="客官，听说“斗破苍穹”这部新剧很好看。";
    	se[4]="553影院新增影视评论及回复功能，快去评论你喜欢的影视剧吧！";
    	se[5]="553影院新增登录注册功能，无需手机号邮箱，快去注册一下吧！";
    	se[6]="553影院，做个人影院中的佼佼者。";
    	se[7]="大家好，我是小喇叭，为您广播本站动态，欢迎您访问本站。";
    	se[8]="注册553影院，记录自己的播放记录，拥有评论功能。";
    	se[9]="截止目前，553影院已注册用户数为"+un+"其中今日注册"+ut+"人,访问ip共计"+vn+"其中今日访问"+vt;
    	se[10]="关闭搜索提示框小窍门：在提示框弹出时，双击屏幕任意地方即关闭提示框！";
    	se[11]="2018年4月份，LongBro开始编写LongBro影院！";
    	//随机生成0~sen.length-1内的整数
    	var i=Math.round(Math.random()*(se.length-1-0)+0);//使用Math.round来取整
    	//alert(se.length-1);
    	document.getElementById("word").innerHTML=se[i];
    	//如何实现逐个循环显示，而不是随机显示？
    	//var i=0;
    	//document.getElementById("word").innerHTML=se[i];
    	//i++;
    }

以上步骤就可以让小喇叭完美的执行了，小喇叭刚开始显示的那一句是动态的，需要用到Java中的四个变量，包括总访问量，总注册量，日访问量，日注册量

![00611.jpg][]

感谢大家的阅读，该篇博文已同步至[本人个人博客][Link 1]，欢迎访问！[553影院][553]欢迎你。

[00612.jpg]: http://img.zy52113.com/blog/00612.jpg
[00610.jpg]: http://img.zy52113.com/blog/00610.jpg
[00611.jpg]: http://img.zy52113.com/blog/00611.jpg
[Link 1]: http://www.longqcloud.cn/detailblog.jsp?id=61
[553]: http://www.zy52113.com