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 相关文章推荐
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
javascript学习小结之prototype
Dec 03 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
微信小程序实现拖拽功能
Sep 26 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内嵌函数用法实例
2015/03/20 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
200行python代码实现2048游戏
2019/07/17 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
python3将变量输入的简单实例
2020/08/19 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
优秀应届生推荐信
2013/11/09 职场文书
个性发展自我评价
2014/02/11 职场文书
法学专业求职信
2014/07/15 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2014年防汛工作总结
2014/12/08 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书