Long Bro博客——查看其它Long Bro影院
JavaWeb视频网站开发:实现小喇叭功能

  作者:赵成龙  发布时间:2018-11-12 13:56:43  所属类别:IT技术  浏览量:7031



 

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

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

    LongBro博客欢迎您

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

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

        第一步:首先写HTML界面

LongBro博客欢迎您

          第二步:写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中的四个变量,包括总访问量,总注册量,日访问量,日注册量

LongBro博客欢迎您

感谢大家的阅读,该篇博文已同步至本人CSDN博客,欢迎访问!





本文出自LongBro博客,如需转载请注明出处。
本文链接:http://www.longqcloud.cn/blogs/61.html
上一篇:音乐网站开发:实现点击按钮切换背景图的功能
下一篇:Java Web视频网站开发:ajax结合js实现tab切换选项卡效果




如果你觉得这篇文章对你有用,欢迎 打赏(打赏记录)

打赏多少,你高兴就行,谢谢你对Long Bro这小子的支持  ^-^

来自:95.55.248.193的评论

553音乐网

2019-04-06 19:01:02


来自:5.188.210.23的评论

553影院

2019-04-06 20:37:48


来自:5.188.210.24的评论

553音乐网

2019-04-30 15:58:25


来自:5.188.210.19的评论

553音乐网

2019-04-30 16:05:21


来自:5.188.210.19的评论

553音乐网

2019-04-30 18:21:05