网页标题滚动显示-文本滚动循环显示-字轮流显示可改变大小与颜色 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[新消息] 您有一条新短消息,请尽快查收</title>
</head>
<body>
<h1>JS</h1>
<p id="msg1">床前明月光,疑是地上霜</p>
<p id="msg2">举头望明月,低头思故乡</p>
<hr>
<h3 id="show"></h3>

<script>
//标题闪烁
// var a = true;
// setInterval(function () {
// if (a) {
// document.title = '[新消息] 您收到了三条新消息,快查看';
// a = false;
// }else{
// document.title = '[　　　] 您收到了三条新消息,快查看';
// a = true;
// }
// },500);


// 标题title滚动
setInterval(function () {
// 获取title
var mya = document.title;
// 截取首个字符
var myb = mya.charAt(0);
// 截取剩余字符串
var myc = mya.substr(1);
// 重新凭借title
document.title = myc + myb;
},300);

// 文字滚动
setInterval(function () {
var msg1 = document.getElementById('msg1');
var str1 = msg1.innerHTML;
msg1.innerHTML = str1.substr(1) + str1[0];
var msg2 = document.getElementById('msg2');
var str2 = msg2.innerHTML;
arr = str2.split('');
arr.push(arr.shift());
msg2.innerHTML = arr.join('');
},300);

// 字轮流显示可改变大小与颜色
var string = '白日依山尽,黄河入海流.';

var i = 0;
setInterval(function() {
if (i >= string.length) i = 0;
// console.log(i);

document.getElementById('show').innerHTML = show(i, string);

i++;
}, 500);

// 执行拼接并返回结果
function show(i, str) {
var tmp = str.substr(0, i);
tmp += '<font color="#f00" size="7">'+str[i]+'</font>';
tmp += str.substr(i + 1);
return tmp;
}

</script>
</body>
</html>
刚学习JS做的一点小特效,肯定有不足之处,本人菜鸟一只,望大牛理解,这是一篇关于 网页标题闪烁 文本文档滚动显示 文字轮流显示并且可以更改文本的style样式,
一些步骤的注释在代码中,很好理解                                                               ----想成为大牛的菜鸟

 

posted @ 2018-09-03 20:21  GodH  阅读(854)  评论(0)  编辑  收藏  举报