JavaScript网页制作特殊效果用随机数


Posted in Javascript onMay 22, 2007

网络世界精彩无比,绚丽的页面如果合理的使用特效,一定会增色不少。下面就是我总结的特效:

跳动文字

想看会跳舞的文字?来吧!

代码:先在〈head〉和〈/head〉之间添加〈script language="JavaScript"〉

〈!--

function font11()

//定义函数font11()

{

document.all.a1.style.fontSize=16+

Math.floor(Math.random()*24); //调用Math.random()函数产生一个随机数,再利用Math.floor()函数产生小于或等于Math.random()*24的下一个数,来改变文字大小

c1=Math.floor(Math.random()*256);

c2=Math.floor(Math.random()*256);

c3=Math.floor(Math.random()*256);

document.all.a1.style.color="rgb("+c1+","+c2+","+c3+")"; //同上,改变文字颜色(利用RGB调色)

timer=setTimeout('font11()',200); //每200毫秒调用一次font11()函数

}

---〉〈/script〉

再在〈body〉中加onLoad="font11();"

最后在需要处加上〈span id="a1"〉飞〈/span〉

特点:文字颜色及大小可随机的变化。

延伸:可在网页中添加多组代码,其中font11? 分别代表不同的文字,今后是font12? 、font13? 等等,文字可表现为每个都不同。

图片淡入淡出

随着时间的过去,图片也循环的由模糊到清晰改变。

代码:先在〈head〉和〈/head〉之间添加〈script language="JavaScript"〉

〈!--

mark=0;

function tupian() //建立函数tupian()

{

if(photo.filters.alpha.opacity〈10)

//当图片透明度小于10时

mark=1;

if(photo.filters.alpha.opacity〉98)

//当图片透明度大于98时

mark=-1;

step=2*mark;

photo.filters.alpha.opacity+=step;

//透明值计数器累加

setTimeout('tupian()',20);

//每隔20毫秒程序执行一次

}

---〉〈/script〉

再在图片属性中加id="photo"和style="filter:alpha(opacity=0;)"

最后在那个图片代码的后面加上〈script〉〈!--

tupian();

---〉〈/script〉

特点:图片循环淡入淡出。

本文的代码都非常简单,需要解释的地方我都有解释。

Javascript 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
JavaScript中操作字符串小结
May 04 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
Ionic快速安装教程
Jun 03 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
vue中使用input[type="file"]实现文件上传功能
Sep 10 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
JS加ASP二级域名转向的代码
May 17 #Javascript
用javascript实现的支持lrc歌词的播放器
May 17 #Javascript
JavaScript中的new的使用方法与注意事项
May 16 #Javascript
几款极品的javascript压缩混淆工具
May 16 #Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 #Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 #Javascript
javascript操作文本框readOnly
May 15 #Javascript
You might like
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
python解析基于xml格式的日志文件
2017/02/25 Python
Python OS模块实例详解
2019/04/15 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
驾驶员岗位职责
2014/01/29 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
毕业证明模板
2015/06/19 职场文书
聘任书的格式及模板
2019/10/28 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js