js 判断页面切换时,标题改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>this is a test</title>
<script>
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
normal_title = document.title;
document.title = '(づ ̄ 3 ̄)づ记得回来找HDQ噢~';
}
else
document.title = normal_title;
});
</script>
</head>

<body>
<p>very 66666!</p>
</body>

</html>
此段代码 在切换页面后自动改变标题。js的简单应用。

标题闪动,你有新短消息特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script language="JavaScript">
step = 0
function flash_title() {
step++
if (step == 3) { step = 1 }
if (step == 1) { document.title = '【你有新的消息】' }
if (step == 2) { document.title = '【      】' }
setTimeout("flash_title()", 380);
}
flash_title()
</script>
欢迎来到HDQ的博客!
</body>

</html>

浏览器标题滚动跑马灯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE栏上滚动的文字</title>
<script language=javascript>
var text = document.title
var timerID
function newtext() {
clearTimeout(timerID)
document.title = text.substring(1, text.length) + text.substring(0, 1)
text = document.title.substring(0, text.length)
timerID = setTimeout("newtext()", 100)
}
</script>
</head>

<body onload="newtext()"></body>
</body>

</html>
<html>

<head>

鼠标点击数字上升(这里不一定必须是数字)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 鼠标点击,随机数字
jQuery(document).ready(function ($) {
var _click_count = 0;
$("body").bind("click", function (e) { //直接给body一个事件好了.
//var n=Math.round(Math.random()*100);//随机数
var $i = $("<b>").text("+" + (++_click_count));//添加到页面的元素
var x = e.pageX, y = e.pageY;//鼠标点击的位置
$i.css({
"z-index": 99999,
"top": y - 15,
"left": x,
"position": "absolute",
"color": "red"
});
$("body").append($i);
$i.animate(
{ "top": y - 180, "opacity": 0 },
1500,
function () { $i.remove(); }
);
e.stopPropagation();
});
});

计算运行时间

HTML代码:

1
<span id="runtime_span"></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("11/25/2017 05:20:00");
Y = new Date(); T = (Y.getTime() - X.getTime()); M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "本站勉强运行: " + A + "天" + B + "小时" + C + "分" + D + "秒";
}

show_runtime();

ps:因作者能力有限,有错误的地方请见谅

  • 喜欢这篇文章的话可以用快捷键 Ctrl + D 来收藏本页

最后更新: 2018年09月19日 15:33

原始链接: https://blog.hdqyf.club/2018/02/24/20180224-HTML小技巧—好玩的特效/

× 请我吃糖~
打赏二维码