网站从去年下半年开始陆陆续续弄了很久了，看似没几个功能，但特别费时间，尤其对于我这个非前端人士来讲。html标签、java script结合着注释，然后查资料，最后改改写写生搬硬凑的往网站后台文件上怼…今天忍首页简陋的公告栏很久了，决定下手整改一番。
目标：
1、公告实现逐字显示，类似打字输入的效果；
2、多条公告连续播放。 #只显示一条太单一
实现：
1、编写script脚本，实现公告逐字输入显示，并自定义多条公告：
文字逐字显示的特效可以通过很多种方式实现，例如jquery之类的。不想再往网站头文件添加各种外部文件了，所以还是选择比较方便的script脚本实现。代码如下：
<!--js9 notice-->
<script language="JavaScript">
function website_notice() {
this.length = website_notice.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = website_notice.arguments[i]}
var notice_array = new website_notice;
notice_array[0]="欢迎您的访问，本站主要分享IT运维领域知识，力求原创，希望能给大家带来一点点工作生活上的便捷. ";
notice_array[1]="技术创造价值，简单传递美好. "
notice_array[2]="如本站内容对您有帮助，请记得评论、收藏和转发哟. "
notice_array[3]="交换友链、需求技术帮助、软件撤销等事务性联系，请通过底部菜单“网站管理”->“留言板”给我留言. "
var x = 1;
var y = 0;
var msg1 = notice_array[y];
function notice_show() {
if (x==msg1.length+1) {
y+=1;
if (y > 3) y=0;
document.form1.notice.value=' ';
msg1 = notice_array[y];
x=0;}
document.form1.notice.value=msg1.substring(0,x);
x+=1;
setTimeout("notice_show() ",150);
}
</script>说明：
上面script脚本实现4条公告轮询播放。当然如果需要可以再多加加，设置notice_arrary[4]、notice_arrary[5]之类，不过记得同时也修改一下if(y >3)条件，不然超过4条就不会再显示了。
2、将script代码插入到header.php或者footer.php文件中，并修改header.php中首页<body>标签：
由<body>改为<body onload=”notice_show()”>，即首页加载完成后触发公告script脚本，开始输出显示公告。截图略。
3、修改公告栏，调用script脚本：我这个网站主题自带了公告栏，所以比较简单，只需要把下列代码复制到公告栏即可。 #如果主题不带公告栏的也没关系，找到需要显示公告栏的位置，粘贴代码即可。显示样式可能得通过css微整一下，毕竟每个人的网站主题都可能不一样的
<form name="form1"><div><p><input type="text" name="notice" size=90 style="border-style: none;" /></p></div></form>注意，form1、notice要和script上面的名称保持一致，否则script无法执行。
P1.网站主题自定义设置公告栏
实际效果：
P2.公告逐字输入显示和多条公告栏连续播报
附：
设置公告<p>标签在<div>标签内垂直居中时，可费了老大一股劲了。最后是通过以下css代码实现的，可供参考：
form {width:100%;height:3rem;}
form div {margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;text-align:center;display: flex;align-items: center;}
form div p {margin: 0 auto;}
form input {width:100%;color: #656D78;}注释：
form {}设置height等于主题公告栏预留的height值；
form div{margin: auto;position: absolute; top: 0; left: 0; bottom: 0; right:0;} #form内的div继承form的宽高属性
form div{text-align:center; display: flex;align-items:center;} #text-align:center让<p>标签内的文字居中，display:flex弹性布局，align-items:center让<p>标签在<div>标签内上下左右居中
form input{}设置文字的颜色
