JS實(shí)現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼
本文實(shí)例講述了JS實(shí)現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼。分享給大家供大家參考,具體如下:
運(yùn)行這款來回出現(xiàn)文字的狀態(tài)欄特效時,請注意頁面左下角的狀態(tài)欄。貌似IE8以上版本看不到效果唉。那么究竟是如何實(shí)現(xiàn)的呢?主要是用函數(shù)來顯示消息,根據(jù)place的值取當(dāng)前需顯示的字符串,準(zhǔn)備在300毫秒后收起顯示,將需取的字符串長度計(jì)數(shù)器加一準(zhǔn)備下一次顯示;同時使用函數(shù)隱藏消息,取Message右邊的一定長度的字符串,設(shè)定消隱下一個字符的延時。
運(yùn)行效果截圖如下:

在線演示地址如下:
http://demo.jb51.net/js/2015/js-status-bar-scroll-show-codes/
具體代碼如下:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var Message=" 歡迎光臨腳本之家,請多多提出你的建議!!! "; //這里可自定義顯示內(nèi)容
var place=1;
function scrollIn() { //這個函數(shù)用來顯示消息
window.status=Message.substring(0, place); //根據(jù)place的值取當(dāng)前需顯示的字符串
if (place >= Message.length) { //如果全部信息已經(jīng)顯示完畢
place=1; //則將place重置
window.setTimeout("scrollOut()",300); //準(zhǔn)備在300毫秒后收起顯示
} else { //否則(信息還沒有顯示完)
place++; //將需取的字符串長度計(jì)數(shù)器加一
window.setTimeout("scrollIn()",50); //準(zhǔn)備下一次顯示
}
}
function scrollOut() { //這個函數(shù)用來消隱消息
window.status=Message.substring(place, Message.length); //取Message右邊的一定長度的字符串
if (place >= Message.length) { //如果已經(jīng)無字符可取(信息已經(jīng)完全消隱)
place=1; //則初始化place
window.setTimeout("scrollIn()", 100); //設(shè)定下一次操作是顯示信息
} else { //否則(信息還沒有消隱完畢)
place++; //計(jì)數(shù)器加一
window.setTimeout("scrollOut()", 50); //設(shè)定消隱下一個字符的延時
}
}
// End -->
</SCRIPT>
<title>來回出現(xiàn)文字的狀態(tài)欄特效</title>
</head>
<body onLoad="scrollIn()">
<b>請注意頁面左下角的狀態(tài)欄</b>
</body>
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
?javascript數(shù)組中的findIndex方法?
這篇文章主要介紹了javascript數(shù)組中的findIndex方法,findIndex()?方法返回傳入一個測試條件函數(shù)符合條件的數(shù)組第一個元素位置,下面更多相關(guān)資料,需要的小伙伴可以參考一下2022-03-03
js函數(shù)setTimeout延遲執(zhí)行的簡單介紹
設(shè)置指定的JS函數(shù)在指定的時間后執(zhí)行,可以利用setTimeout()函數(shù)。2013-07-07
JavaScript實(shí)現(xiàn)找出數(shù)組中最長的連續(xù)數(shù)字序列
這篇文章主要介紹了JavaScript實(shí)現(xiàn)找出數(shù)組中最長的連續(xù)數(shù)字序列的方法,需要的朋友可以參考下2014-09-09
Javascript實(shí)現(xiàn)倒計(jì)時時差效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)倒計(jì)時時差效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05
詳解JavaScript中Promise的原理與應(yīng)用
Promise是JavaScript中的一個重要概念,也是現(xiàn)代JavaScript開發(fā)中必不可少的一部分,本文主要介紹了Promise的實(shí)現(xiàn)原理、使用方法及常見應(yīng)用場景,需要的可以收藏一下2023-06-06
d3.js實(shí)現(xiàn)簡單的網(wǎng)絡(luò)拓?fù)鋱D實(shí)例代碼
最近一直在學(xué)習(xí)d3.js,大家都知道d3.js是一個非常不錯的數(shù)據(jù)可視化庫,我們可以用它來做一些比較酷的東西,比如可以來顯示一些簡單的網(wǎng)絡(luò)拓?fù)鋱D,這篇文中就通過實(shí)例代碼給大家介紹了如何利用d3.js實(shí)現(xiàn)簡單的網(wǎng)絡(luò)拓?fù)鋱D,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-11-11
uniapp自定義下拉刷新組件項(xiàng)目實(shí)踐總結(jié)分析
在日常的開發(fā)過程中,我們經(jīng)常遇到下拉刷新的場景,很方便的刷新游覽的內(nèi)容,在此實(shí)現(xiàn)了一個下拉刷新的自定義組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-09-09
JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果
這篇文章主要介紹了JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果,涉及JavaScript針對頁面元素的遍歷及樣式動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10

