位置:首页 » 教程 » js随机生成网页背景颜色的方法教程

js随机生成网页背景颜色的方法教程

日期:2015-04-09 阅读:0num
Advertisement

本文实例讲述了js随机生成网页背景颜色的方法。分享给大家供大家参考。具体实现方法如下:

代码如下:

<HTML>
<HEAD>
<TITLE>随机生成网页背景颜色的JS特效</TITLE>
<STYLE>
.30pt{font-size:30pt;color:#de3076}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
color=new Array("0","3","6","9","C","F");
speed=250;
document.bgColor="FFFFFF";
bg=new Array("FFFFFF","FFFFFF","FFFFFF");
function begin() {
document.form.col1.value=" X "; document.form.col2.value=" X ";
document.form.col3.value=" X "; i=0; roll(speed);
}
function roll(speedB) //轮子滚动
{
if (document.form.col1.value==" X ") {
document.form.c1.value=document.form.b1.value;
document.form.b1.value=document.form.a1.value;
document.form.a1.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6]; //利用随机函数产生轮子上的颜色值
}
if (document.form.col2.value==" X ") {
document.form.c2.value=document.form.b2.value;
document.form.b2.value=document.form.a2.value;
document.form.a2.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6];
}
if (document.form.col3.value==" X ") {
document.form.c3.value=document.form.b3.value;
document.form.b3.value=document.form.a3.value;
document.form.a3.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6];
}
setTimeout("roll("+speedB+")",speedB);
}
function stop(col) //轮子停止滚动
{
if (col==1) {document.form.col1.value=" ";i++;}
if (col==2) {document.form.col2.value=" ";i++;}
if (col==3) {document.form.col3.value=" ";i++;}
if (i==3) {
bg[0]=document.form.a1.value+
document.form.a2.value+
document.form.a3.value;
bg[1]=document.form.b1.value+
document.form.b2.value+
document.form.b3.value;
bg[2]=document.form.c1.value+
document.form.c2.value+
document.form.c3.value;
speedB=500000;roll(speedB);
}
}
function view(letter) //颜色预览
{
document.bgColor=bg[letter];
document.form.color.value="#"+bg[letter];
}
-->
</script>
</head>
<center>
<br><br><br><br>
<form name="form">
<table cellpadding=2 border=1>
<tr><td align=center>
<input type=text name="a1" size=3 onFocus="this.blur()" value=" ">
<input type=text name="a2" size=3 onFocus="this.blur()" value=" ">
<input type=text name="a3" size=3 onFocus="this.blur()" value=" ">
<input type=button onClick="view(0)" value="预览"><br>
<input type=text name="b1" size=3 onFocus="this.blur()" value=" ">
<input type=text name="b2" size=3 onFocus="this.blur()" value=" ">
<input type=text name="b3" size=3 onFocus="this.blur()" value=" ">
<input type=button onClick="view(1)" value="预览"><br>
<input type=text name="c1" size=3 onFocus="this.blur()" value=" ">
<input type=text name="c2" size=3 onFocus="this.blur()" value=" ">
<input type=text name="c3" size=3 onFocus="this.blur()" value=" ">
<input type=button onClick="view(2)" value="预览"><br>
<input type=button onClick="stop(1)" value=" X " name="col1">
<input type=button onClick="stop(2)" value=" X " name="col2">
<input type=button onClick="stop(3)" value=" X " name="col3">

</td>
<td valign=middle align=center>
<input type=button onClick="begin()" value="启动!"><p>
<table bgcolor=FFFFFF border=1 cellspacing=0>
<tr><td align=center valign=middle>按"X" 轮子停止转动...<p>
BG Color = <input type=text size=7 value="#FFFFFF" name=color>
</td></tr>
</table>
</td></tr>
</table>
</form>
</center>
<table class=30pt>
<tr><td>颜色的随机产生
</tr><tr><td>按下启动按钮,右边的三排轮子开始滚动
</tr><tr><td>按下三个X按钮颜色值定下来
</tr><tr><td>按下预览按钮可看颜色效果
</tr>
</table><p>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

相关文章
  • js随机生成网页背景颜色的方法教程

    本文实例讲述了js随机生成网页背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- color=new Array(

  • js随机生成网页背景颜色的方法

    这篇文章主要介绍了js随机生成网页背景颜色的方法,涉及javascript操作背景色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js随机生成网页背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE> <

  • JS修改iframe页面背景颜色的方法教程

    本文实例讲述了JS修改iframe页面背景颜色的方法.分享给大家供大家参考.具体如下: 下面的代码演示了如何在网页里通过JS代码修改嵌入的iframe的网页背景颜色 <!DOCTYPE html> <html> <head> <script> function changeStyle() { var x=document.getElementById("myframe"); var y=(x.contentWindow || x.cont

  • JS实现鼠标滑过链接改变网页背景颜色的方法 JS实现鼠标滑过链接改变网页背景颜色的方法

    本文实例讲述了JS实现鼠标滑过链接改变网页背景颜色的方法.分享给大家供大家参考,具体如下: 这个小特效很不错,用链接改变网页背景色,鼠标放上链接文字上,网页背景就会跟着变换,想让你的主页更个性一点的朋友,这个代码一定能用上,其实你可在此基础上修改一下代码,改成鼠标放上文字切换样式表,这样整个网页就变了风格,是不是很实用? 运行效果截图如下: 具体代码如下: <html> <head> <title>鼠标放上链接改变网页背景颜色</title> <met

  • JS修改iframe页面背景颜色的方法

    本文实例讲述了JS修改iframe页面背景颜色的方法.分享给大家供大家参考.具体如下: 下面的代码演示了如何在网页里通过JS代码修改嵌入的iframe的网页背景颜色 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <head> <script> function changeStyle() { var x=document.getElementBy

  • JS实现点击颜色块切换指定区域背景颜色的方法教程

    本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <html> <head> <title>JS实现点击颜色块切换指定区域的背景颜色</title> </head> <body> <div align="center"> <table bgcolor=#F8F8F8 border="0" width="5

  • JS实现让访问者自助选择网页文字颜色的方法教程

    本文实例讲述了JS实现让访问者自助选择网页文字颜色的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现让访问者自助选择网页的文字颜色</title> <script language="javascript"> <!-- function chColor(c){ document.body.style.color = c; } //--> </script>

  • JS实现在页面随时自定义背景颜色的方法教程

    本文实例讲述了JS实现在页面随时自定义背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <HTML> <HEAD> <TITLE>JS实现在页面随时自定义背景颜色</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin //以下代码将输入框及其所在的层写进窗口. document.writeln('<div align="center&quo

  • win7系统设置网页背景颜色的方法 win7系统设置网页背景颜色的方法

    1.首先鼠标右击桌面空白处选择"个性化"选项,在弹出来的个性化窗口中选择点击下方的"窗口颜色"项目; 2.在弹出的对话框中选择点击"高级外观设置"选项; 3.然后在弹出来的颜色和外观中的下拉选项中选择"窗口"选项,接着点击后面的颜色下拉按钮; 4.接着在弹出的颜色窗口中,选择颜色绿色(或者填写色调为85,饱和度为123,亮度205(保护眼睛的豆沙色)),在单击"添加到自定义颜色"按钮; 5.之后打开ie浏览

  • js实现点击按钮后给Div图层设置随机背景颜色的方法

    这篇文章主要介绍了js实现点击按钮后给Div图层设置随机背景颜色的方法,实例分析了javascript操作页面div元素属性及随机数的相关技巧,需要的朋友可以参考下 本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法.分享给大家供大家参考.具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

  • JS实现网页背景颜色与select框中颜色同时变化的方法教程

    本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • JS实现网页背景颜色与select框中颜色同时变化的方法

    这篇文章主要介绍了JS实现网页背景颜色与select框中颜色同时变化的方法,实例分析了javascript操作select及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

  • JS实现点击颜色块切换指定区域背景颜色的方法

    这篇文章主要介绍了JS实现点击颜色块切换指定区域背景颜色的方法,涉及javascript操作cookie及背景色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <html> <head> <title>JS实现点击颜色块切换指定区域的背景颜色</title> </head> <body> <div align=&

  • JS实现让网页背景图片斜向移动的方法教程

    本文实例讲述了JS实现让网页背景图片斜向移动的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <html> <head> <title>JS实现让网页背景图片斜向移动</title> <body background="images/changshi.ico"> <script language="Javascript"> <!-- function selectAll(the

  • JavaScript让网页出现渐隐渐显背景颜色的方法

    这篇文章主要介绍了JavaScript让网页出现渐隐渐显背景颜色的方法,涉及javascript操作样式的相关技巧,非常具有实用价值,希望本文所述对大家的javascript程序设计有所帮助. 本文实例讲述了JavaScript让网页出现渐隐渐显背景颜色的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html> <head>

  • JS实现在页面随时自定义背景颜色的方法

    这篇文章主要介绍了JS实现在页面随时自定义背景颜色的方法,实例分析了javascript操作css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现在页面随时自定义背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <HTML> <HEAD> <TITLE>JS实现在页面随时自定义背景颜色</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--

  • 网页设计技巧:创建网页背景材质的方法 网页设计技巧:创建网页背景材质的方法

    破洛洛文章简介:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Ph

  • jquery入门 批改网页背景颜色 jquery入门 批改网页背景颜色

    jquery入门 修改网页背景颜色 我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现. 效果图: show you code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1

  • js随机生成字母数字组合的字符串 随机卡通片数字 js随机生成字母数字组合的字符串 随机卡通片数字

    js随机生成字母数字组合的字符串 随机动画数字 效果描述: 附件中只有一个index.html文件有效 其中包含css以及html两部分内容 纯js生成的几个随机数字 每次都不重复,点击按钮后再次切换 使用方法: 1.将css样式引入到你的网页中 2.将body中的代码部分拷贝到你需要的地方即可 JS生成随机的由字母数字组合的字符串 前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法 Math.random().toStri

  • jquery动态更换网页背景图的方法

    这篇文章主要介绍了jquery动态更换网页背景图的方法,需要的朋友可以参考下 有些时候,我们可以为用户提供很贴心的功能,比如判断用户是什么时候来访问的,然后给出一句问候,晚上好,下午好之类的.并且更换网页的背景颜色,比如晚上的时候就可以用满天星星的背景,白天就用阳光灿烂,或者特定节日就用该主题背景,让你的网站显得非常灵活,不枯燥. 下面就如何实现背景更换给出一种解决方法: 如何实现 很简单,下面是 JQuery 代码: 代码如下: function doChangeBkg() { var bkg

最新文章
  • 玛雅人文明真相 遭月球外星人改造基因 玛雅人文明真相 遭月球外星人改造基因

    玛雅人文明真相 遭月球外星人改造基因,玛雅人作为人类拥有超古代文明的代表,不仅发明了金字塔,还有着许多震惊人们的发明,这些发明仿佛来自未来,难道这些和外星人有关,宇航员发布的月球神秘飞行器竟和玛雅人壁画中的一模一样,究竟这是怎么回事呢?莫非玛雅人去过月球. 玛雅人大约生活在公元前两千五百年的墨西哥.危地马拉.伯利兹.沙尔瓦多.洪都拉斯等地方,人口大约有两百万,关于这个古代文明有很多的故事记载,为何在他们的原始居住地有如此多的神秘事件,并且通过对他们的文明进行研究发现,这个玛雅文明或许比我们想象的

  • 处暑养生17个小妙招 处暑养生17个小妙招

    2015年处暑时间是8月23日,处暑的到来意味着暑气尽,早晚转凉,秋天到了.那么你知道处暑前后如何养生吗?小编为您介绍处暑养生17个小妙招! 1.早睡早起,睡好子午觉 处暑节气正是由热转凉的交替时期,自然界中阴气增强,阳气减弱,人体的阳气也随着内收,"秋乏"也就随之出现.而睡眠不仅可以消除疲劳,还能使大脑.身体得到充分休息,是养生美容的重要方法之一,应充分利用睡眠来调养身体.建议大家保证充足的睡眠,改掉夏季晚睡的习惯,以晚上10点前入睡最佳,每天比夏天增加1小时睡眠为好,并保证早睡早起

  • 萤火虫之森!全球8大萤火虫观赏地 寻觅仲夏夜精灵! 萤火虫之森!全球8大萤火虫观赏地 寻觅仲夏夜精灵!

    "银烛秋光冷画屏,轻罗小扇扑流萤",诗句中的流萤,就是萤火虫.萤火虫是仲夏夜的精灵,它们潜伏在夜晚的丛林,用微弱却温暖的绿光点缀着周边的美丽.下面未解之谜小编为大家盘点全球8大萤火虫观赏地,有机会的朋友可以去亲眼看看这一美景哦! TOP1:新西兰,维多摩萤火虫洞 位于新西兰北岛东岸,是新西兰最有名的天然奇景.这里是一处十分难得的活性岩石洞穴,该洞穴约在一万五千年前形成,此洞穴的山上原有一个小湖泊被冰封着,后来因为气候改变,冰雪渐渐退去,流入下方的石灰质之岩层裂缝,逐渐冲蚀成一洞穴,因生

  • 室内布局图32 室内布局图32

  • 淘宝港澳台及海外会员如何注册、绑定及激活支付宝 淘宝港澳台及海外会员如何注册、绑定及激活支付宝

    一.注册支付宝账户 海外用户请选择"电子邮箱"注册个人账户"; 二.绑定支付宝账户 第一步:打開淘寶網首頁進行登錄 第三步:登錄后進入"我的淘寶"頁面 第四步:在"帳號管理"中選擇"支付寶帳戶管理",輸入您之前註冊的支付寶帳戶和登錄密碼,綁定支付寶帳戶

  • 它们的世界// 它们的世界//

  • 360搜索联盟怎么添加广告代码? 360搜索联盟怎么添加广告代码?

    360搜索联盟怎么添加广告代码?在上周出来的360搜索联盟在站长圈是火了一把了,小编看了这些站长分享也整理了注册了一个,结果发现360搜索联盟后台简单并且还有一些问题了,今天我们来为各位分享的是360联盟广告添加步骤. 1.我们在注册成功之后点击"业务管理",然后会看到我们我们审核通过的网了了,我现点击左边的"已添加代码位",然后会显示没有任何广告位了,如果有就会显示了. 2.如果你要添加广告位我们点击"添加代码位 "然后会弹出如下界面. 3.然

  • AccessDiver中文使用指南

    不知道那位朋友翻译写出来,收藏了N久,今天给大家转出来吧不错AccessDiver中文使用指南 AccessDiver中文使用指南v1.0 By LordOne 一,前言 关于AD以及暴力破解ABC 什么是AD? AD是AccessDiver的简称,就象MicroSoft被称为 MS一样.AccessDiver是一个安全测试软件,官 方网站是www.accessdiver.com,作者叫Jean, 在Deny.de(一个著名的网络安全论坛)的 support版上经常可以看到他的身影,你可以在 那

  • Socket服务器的信息中转功能

    Socket服务器的信息转发功能 我的问题是这样的 Ssk 是一个ServerSocket对象 sk 是一个socket对象 public class createConnect extends Thread { ServerSocket Ssk; public createConnect(ServerSocket Ssk) { this.Ssk = Ssk; } public void run() { while(true) { socket sk = Ssk.accept();//建立一个链

  • 高分:台式机的内存条可以互换用吗

    高分在线等:台式机的内存条可以互换用吗? 我从一台报废了的台式机上拔了一个256M的内存条,想插到另外一台台式机上增加它的内存,但好象怎样也插不上去,开机也检测不到新增加的内存条,两根一比较,长度是一样,但那个缺口好象不一致,请问:台式机的内存条可以互换用吗?难道台式机的内存条接口不是标准的? 长期DIY台式机的这个问题好象不难,请给我答案,大侠~ ------解决方案-------------------- 这就是一代内存和二代内存 不能混用的 ------解决方案--------------

热门推荐
  • torrentday.com 邀请码 torrentday.com 邀请码 想去torrentday.com 看看,要邀请码,谁有邀请码分享一个 --cut-- costume在2014-12-11 19:53:2回答到: 有几个 Livid在2014-12-11 20:10:4回答到: 请不要在 V2EX 发布盗版下载链接. http://www.v2ex.com/about youjustdoit在2014-12-11 20:56:5回答到: 谢谢提醒
  • 立春节民间习俗 立春节民间习俗 本站阅读配图 立春,岁时节气名,是二十四节气之一.为夏历的正月节,有时也在腊月.按传统的算法:大寒后15天为立春.每年公历2月4日前后太阳到达黄经315°时开始,是为立春日.此时东风劲吹,河水解冻,沉睡了一冬的蛰虫开始活动起来.草木复苏,气温回升,标志着春季开始. "一年之计在于春",人们十分珍惜这个气节.几千年来形成了固定的风俗习惯.尽管陕南.陕北.关中各地区的风俗各有差异,但在许多主要活动上,还是大同小异的.立春的风俗很多,这里只举出数例.随着时代的发展,风俗活动的形式有繁有简,内
  • 小米电视2系统版本多久更新一次 小米电视2系统版本多久更新一次 40寸.49寸.55寸的小米电视2的MIUI TV操作系统每月升级,每月都有新功能和新体验. 关于小米电视2系统版本多久更新一次的疑问,下面将做详细的解答.49寸的小米电视2搭载MStar四核1.45GHz智能电视处理器,4+2核Mali450-MP4图形处理器,2GB DDR3大内存,让电视轻松运行最新大型3D游戏.流畅播放4K高清视频.8GB eMMC高速闪存(支持TF卡,最高可扩展64GB),能够收纳应用.游戏与媒体内容. 49寸的小米电视2支持最新最快802.11ac协议,2x2双频天线