对js操作html的实践【2】——随机标题与滚动标题

先放几张今天要达成的效果图

(随机标题效果)

(滚动标题效果)

接下来放出源码:

1.随机标题

1 //指定条目数
2 tips = new Array(1);
3 //条目内容
4 tips[0] = ‘很抱歉冒险就是从来不会让人做好准备。‘;
5 tips[1] = ‘Let us start!‘;
6 index = Math.floor(Math.random() * tips.length);
7 window.document.title += "平行世界 The Parallel Universe - "+tips[index];

(1)在上面的源码中,用到了随机数运算,取随机数的实现可以达成非常多的随机特效:

取随机数有以下几种方法:

1.Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) 
2.Math.floor(num); 参数num为一个数值,函数结果为num的整数部分。 
3.Math.round(num); 参数num为一个数值,函数结果为num四舍五入后的整数。

Math:数学对象,提供对数据的数学计算。
Math.random(); 返回0和1间(包括0,不包括1)的一个随机数。

Math.ceil(n); 返回大于等于n的最小整数。
用Math.ceil(Math.random()*10);时,主要获取1到10的随机整数,取0的几率极小。

Math.round(n); 返回n四舍五入后整数的值。
用Math.round(Math.random());可均衡获取0到1的随机整数。
用Math.round(Math.random()*10);时,可基本均衡获取0到10的随机整数,其中获取最小值0和最大值10的几率少一半。

Math.floor(n); 返回小于等于n的最大整数。
用Math.floor(Math.random()*10);时,可均衡获取0到9的随机整数。

(参考自互联网)

(2)是的如果我想加入更多随机用量,可以这样写代码:

1 //指定条目数
2 tips = new Array(4);
3 //条目内容
4 tips[0] = ‘很抱歉冒险就是从来不会让人做好准备。‘;
5 tips[1] = ‘Let us start!‘;
6 tips[2] = ‘QAQ‘;
7 tips[3] = ‘BBQ‘;
8 index = Math.floor(Math.random() * tips.length);
9 window.document.title += "平行世界 The Parallel Universe - "+tips[index];

这之中用到了数组(tips)许多编程语言都相通,数组的元素是从0开始的

||

代码很简单,在此不再赘述。

2.滚动标题。以下是代码:

 1 var repeat=0 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
 2 var title=document.title
 3 var leng=title.length
 4 var start=1
 5 function titlemove() {
 6   titl=title.substring(start, leng) + title.substring(0, start)
 7   document.title=titl
 8   start++
 9   if (start==leng+1) {
10     start=0
11     if (repeat==0)
12     return
13   }
14   setTimeout("titlemove()",240)
15 }
16 if (document.title)
17 titlemove()

这个代码也很容易理解,只要弄清楚原理与.substring的用法:源码中利用substring截取了起始位置(start)到末尾的所有字符。

并将从0开始到start位置的字符加到其末尾,不断更新达到滚动效果。

总结:随机数、数组等在js中有很大的用处,但还是看创新,我相信想到就能做到!

时间: 2024-08-03 23:54:04

对js操作html的实践【2】——随机标题与滚动标题的相关文章

对js操作html的实践【1】——实现网页假崩溃吸引网友注意力

前些天逛网站的时候,发现了一些好玩的细节:当网页失去焦点后标题显示网页崩溃,这将使得浏览者重新点回网页. 来自ANOTHERHOME(https://www.anotherhome.net/)与晨旭博客(https://www.chenxublog.com/)的实例 |||||||| (图为ANOTHERHOME) 博主按下了F12--ヽ( ̄▽ ̄)?发现了这样的代码: 1 // title变化 2 var OriginTitile = document.title; 3 var titleTim

Storm实时计算:流操作入门编程实践

转自:http://shiyanjun.cn/archives/977.html Storm实时计算:流操作入门编程实践 Storm是一个分布式是实时计算系统,它设计了一种对流和计算的抽象,概念比较简单,实际编程开发起来相对容易.下面,简单介绍编程实践过程中需要理解的Storm中的几个概念: Topology Storm中Topology的概念类似于Hadoop中的MapReduce Job,是一个用来编排.容纳一组计算逻辑组件(Spout.Bolt)的对象(Hadoop MapReduce中一

node.js+react全栈实践-Form中按照指定路径上传文件并

书接上回,讲到“使用同一个新增弹框”中有未解决的问题,比如复杂的字段,文件,图片上传,这一篇就解决文件上传的问题.这里的场景是在新增弹出框中要上传一个图片,并且这个上传组件放在一个Form中,和其他文本字段一起提交给接口. 这里就有几个要注意的问题: 图片上传时最好能在前端指定图片类型,根据这个类型上传到指定的目录.比如这里是新增用户,上传用户图片,那么这里就指定类型是“user”,那么就把这个文件上传到服务器的upload/user目录中.这样方便后期维护,比如要把项目中的文件统一迁移到另外一

JS操作字符串常用的方法

JS操作String对象的方法 charAt(index):返回指定索引处的字符串charCodeAt(index):返回指定索引处的字符的Unicode的值concat(str1,str2,...):连接多个字符串,返回连接后的字符串的副本fromCharCode():将Unicode值转换成实际的字符串indexOf(str):返回str在父串中第一次出现的位置,若没有则返回-1lastIndexOf(str):返回str在父串中最后一次出现的位置,若没有则返回-1match(regex):

JS操作select标签

主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速度还是可以的,用户基本体会不到带来的轻微卡顿,还有种方式是把数据直接写在本地的js中作为数组存放起来,但是我的数据已经在数据库中,所以这种方式被我否定了,但是我认为这种方式运行速度应该比我的快. 下面是JS操作select的几种用法,常用的我就记录一下. 1.动态创建select function

js操作cookie

    前言 最近的一个项目需要做用户最近浏览的效果,需要使用cookie存储的方式来实现,找了一下相关的资料,于是便有了本篇博文,写js操作cookie的文章挺多的,不过我觉得自己还有必要记录一的,毕竟自己的东西印象更加的深刻,也方便以后的查找使用,再次感谢一下网络资料的无私奉献者们——祝你们身体健康,愿上帝与你们同在. 1:处理cookie的js文件,代码简单注释尚可,建议先看一下W3C有关cookie资料(链接往下拉!) /*useCookie.js:处理cookie的文件*/ /** *

[荐]使用Js操作注册表

使用Js操作注册表 要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作. WshShell对象:可以在本地运行程序.操纵注册表内容.创建快捷方式或访问系统文件夹.

js 操作 cookie

$(function(){ /** * version 1.0 * 功能:此文件旨在通过js操作cookie,包括cookie的读和写 * 作者:郭军周 * Email:[email protected] * 使用举例: * window.__cookie.setCookie(string key,string value,int time); * window.__cookie.getCookie(string key); * 几点说明: * 1:cookie 以字符串的形式保存在 docum

JS操作JSON总结

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包.本文主要是对JS操作JSON的方法做下总结. 在JSON中,有两种结构:对象和数组. 1. 一个对象以“{”(左括号)开始,“}”(右括号)结束.每个“名称”后跟一个“:”(冒号):“‘名称/值’ 对”之间使用“,