一个不错的渐隐文字效果
程序员文章站
2022-04-08 19:27:09
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript">
var col=255;
var se=1
function chg() {
document.getElementById("title").style.color="rgb(" + col + "," + col + "," + col + ")";
if (col == 0){se = 1;}
else if(col == 255){se = -1;}
col += se;
setTimeout('chg()', 10);
}
</script>
</style>
</head>
<body onload="chg()">
<form name="titlechk">
<tr>
<td width="210" colspan="6" background="img/jb_bg_t2.jpg">
<div id="inputbox" style="margin-left: 11px; margin-bottom: 2px;">
<input id="title" type="text" name="stitle" class="tmptxt" value="GuitarMusic" style="font-size: 12px; width: 180px; height: 16px; border: none;" readonly align="absmiddle">
</div>
</td>
</tr>
<input name="text1" type="button" onClick="chg()">
</form>
</body>
</html>
<script language="JavaScript">
var col=000;
var se=3
var txt = new Array()
txt[0] = "0"
txt[1] = "1"
txt[2] = "2"
txt[3] = "3"
var all=1;
function chg() {
document.getElementById("title1").style.color="rgb(" + col + "," + col + "," + col + ")";
if (col < 255 ){
se = 15;
col += se;
var aaa=setTimeout('chg()', 1);
}
else {window.clearTimeout(aaa);chgtext();}
}
function chg2() {
document.getElementById("title1").style.color="rgb(" + col + "," + col + "," + col + ")";
if (col > 0 ){
se = 15;
col -= se;
var aaa=setTimeout('chg2()', 1);
}
else {window.clearTimeout(aaa);}
}
function chgtext() {
if(all==txt.length){document.getElementById("title1").value=txt[0];all=0;all+=1;}
else{document.getElementById("title1").value=txt[all];all=all+1;};
chg2();
}
</script>
<form name="titlechk">
<tr>
<td width="210" colspan="6" background="img/jb_bg_t2.jpg">
<div id="inputbox" style="margin-left: 11px; margin-bottom: 2px;">
<input id="title1" type="text" name="stitle" class="tmptxt" value="0" style="font-size: 12px; width: 180px; height: 16px; border: none;" readonly align="absmiddle">
</div>
</td>
</tr>
<input name="text1" type="button" onClick="chg()">
</form> 上一篇： 怎样操作vscode内使用.vue代码