Home > Web Front-end > JS Tutorial > JS realizes super simple webpage title running and flashing prompt effect code_javascript skills

JS realizes super simple webpage title running and flashing prompt effect code_javascript skills

WBOY
Release: 2016-05-16 15:35:26
Original
1764 people have browsed it

The example in this article describes the JS implementation of a super simple webpage title running and flashing prompt effect code. Share it with everyone for your reference, the details are as follows:

Here is a demonstration of the webpage Title text running effect achieved with just a few lines of JS code, similar to the title flashing reminder function when there is a message. In the JS code, when the variable _record accumulates to 3, it is assigned a value of 1. Equivalent to an infinite loop. The content of the message prompt that needs to be displayed can be customized.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-title-blink-style-codes/

The specific code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现title标题闪烁提示信息</title>
</head>
<body>
<script type="text/javascript">
_record = 0;
var myTitle = document.title;
function titleBlink(){
  _record++;
  if(_record==3){//当变量_record累加到3是,将其赋值为1。相当于无限循环。
    _record=1;
  }
  if(_record==1){
    document.title='【  】'+myTitle;
  }
  if(_record==2){
    document.title='【新消息】'+myTitle;
  }
  setTimeout("titleBlink()",500);//调节时间,单位毫秒。
}
titleBlink();
</script>
<center><h1>几行js实现闪烁的title。</h1></center>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone in JavaScript programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template