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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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单一接口的实现方法
2015/06/20 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
小程序实现多选框功能
2018/10/30 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python单元测试与测试用例简析
2019/11/09 Python
Python生成词云的实现代码
2020/01/14 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
django下创建多个app并设置urls方法
2020/08/02 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
财务副总经理工作职责
2013/11/25 职场文书
开业庆典邀请函
2014/01/08 职场文书
服装促销活动方案
2014/02/23 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
营销与策划实训报告
2014/11/05 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android