您的位置:68399皇家赌场 > 服务器租用 > 鼠标选用动态改动网页背景颜色的JS代码

鼠标选用动态改动网页背景颜色的JS代码

发布时间:2019-11-23 18:47编辑:服务器租用浏览(166)

    唯有 90 时期的 Web 开垦者才记得这一个

    2016/04/26 · 功底才能 · 2 评论 · WEB

    本文由 伯乐在线 - dcscodelife 翻译,艾凌风 校稿。未经许可,禁绝转发!
    波兰语出处:holman。接待插足翻译组。

    你早就强行把 <blink> 标签放入<marquee> 标签吗?目前Pique斯动漫专业室得到了富有荣誉,不过在 90 时代这一个做准绳是Computer动漫的光辉创举。通过整合三种标签,你成为了一个先驱。一个创新意识Infiniti的人。二个令全体人都崇拜的人。

    在 90 时代,你早就是贰个网页开拓者。

    在这里时,你精晓自个儿是叁个平安无事的人选。伴随你而来的是最佳多量的技能改过,从此以后时开首,大家还未有赶趟做出喜好,本领就早就开头复制开来了。

    让大家先放下 jQuery,抛开非关系型数据库不谈:大家有更关键的政工要研商。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <TITLE>『{$Think.config.web_name}管理平台』By ThinkPHP {$Think.version}</TITLE>
    <load  file="../Public/css/{$Think.config.web_css_style|getDefaultStyle}.css" />
    <style>
    html{overflow-x : hidden;}
    </style>
    <base target="main" />
    </HEAD>

    动用Javascript实现,用鼠标点击相应颜色,动态改动网页背景颜色

    Iframe用法精析

    1×1.gif

    1×1.gif 相应拿到庞大的格莱美大奖。可能普利策消息奖。大概近似八年级体育课上发布的一级升高奖。除了链式链表,它是计算机科学史上最要紧的姣好。它不是大家应得的前途,而是大家要求的现在(直到盒子模型通透到底代替了它卡塔尔国。

    即便您还未不掌握大家的 1×1.gif 小把戏,请看上面:

    www.68399.com 1

    你能收看它呢,让大家加大学一年级些:

    www.68399.com 2

    The 1×1.gif

    这么些 1×1.gif – 依然 spacer.gif,或然 transparent.gif – 仅仅是一个长度宽度都以二个像素的透明 GIF 图像。

    JavaScript

    <IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

    1
    <IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

    经过地方的代码,你能够把成分放置在页面包车型地铁此外岗位上。

    JavaScript

    <TABLE> <TR> <TD><IMG SRC="1x1.gif" WIDTH=300> <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT> </TR> <TR> <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi"> </TR> </TABLE>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <TABLE>
      <TR>
        <TD><IMG SRC="1x1.gif" WIDTH=300>
        <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT>
      </TR>
      <TR>
        <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi">
      </TR>
    </TABLE>

    1×1.gif 令你不费吹灰之力地在页面的其他位放置成分。直到明天截至,它仍为唯风流倜傥的垂直居申月素的秘籍。

    JavaScript

              

    1
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    图表对于你来讲是或不是太高端了?《HTML For Dummies》是否截止第四章才介绍 <IMG> 标签?将来好了,你是幸而的:&nbsp; 标签来了!

    你能够对团结说,“我知道全数 HTML 实体编码。这些弱不禁风的美男子来这里干嘛的?”

    听着,作者水乳交融的智慧的喜人的读者对象,那是三个现行反革命的青少年未有给与丰盛器重的更新:不断重复 &nbsp;。很像 1×1.gif 的小把戏,你能自由地强盛 &nbsp; 并用在任何你须要之处:

    JavaScript

    PLEASE SIGN <BR>       MY GUESTBOOK BELOW: <HR><HR>

    1
    2
    3
    PLEASE SIGN  <BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MY GUESTBOOK BELOW:
    <HR><HR>

    在 90 时期,假若我每写下二个 &nbsp; 就收获五美分,我就能够有丰盛的钱支付来自美利坚合众国在线的每月超额支出账单了。

    <body >
    <div id="menu" >
    <TABLE cellpadding=0 cellspacing=0 >
    www.68399.com ,<tr>
     <td height='5' colspan=7 ></td>
    </tr>
    <TR >
     <th ><IMG SRC="../Public/images/home.gif" WIDTH="16" HEIGHT="16" BO库罗德DE哈弗="0" ALT="" align="absmiddle"> <present name="Think.get.title"> {$Think.get.title}</present><notpresent name="Think.get.title">后台首页</notpresent> </th>
    </TR>
    <iterate id="item" name="menu" >
    <eq name="item['group_id']" value="$menuTag">
    <eq name="item['access']" value="1" >
    <TR >
     <TD><div ><IMG SRC="../Public/images/comment.gif" WIDTH="9" HEIGHT="9" BORDER="0" align="absmiddle" ALT=""> <A name']}/index/" id="{$key}">{$item['title']}</A></div></TD>
    </TR>
    </eq>
    </eq>
    </iterate>
    <tr>
     <td height='5' colspan=7 ></td>
    </tr>
    </TABLE>
    </div>
    <script language="JavaScript">
    <!--
     function refreshMainFrame(url)
     {
      parent.main.document.location = url;
     }

    那是截图

    <iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-ad.htm"></iframe>

    点下划线,边界效应

    在 HTML 快走到他的纯金一代的狐狸尾巴时,CSS 上台了,它带给了多个剧情和体制抽离的社会风气,从此未来我们也最初不停地拍卖灾祸。

    勇敢地自然是用 CSS 来删除链接的下划线效果。生机勃勃夜之间,整个因特网都深陷了这一个办法所带动的泥泞之中,文本看起来像链接,链接看起来像文本。你不掌握点哪个地方,可是漆黑并从未相连多长期,因为大家证明了光标效果(你还平素不活到你的鼠标有十二个火球尾巴的时候卡塔 尔(阿拉伯语:قطر‎。

    高级技术的运用是这么显著,甚至于大致大家全部人都从一齐首就选择CSS。作者照旧在 2004 年的意气风发份 index.shtml(对,便是SSI卡塔 尔(阿拉伯语:قطر‎文档中窥见了证据:

    JavaScript

    <style type="text/css"> <!-- a:hover {text-decoration: none; color: #000000} --> </style>

    1
    2
    3
    4
    5
    <style type="text/css">
    <!--
    a:hover {text-decoration: none; color: #000000}
    -->
    </style>

    正是它了!当然,那是 CSS 的内嵌样式。那些样式让你的鼠标滑过链接时,删除链接的下划线而且链接的文字变黑。从此未来,人机联作式网址诞生了。

     if (document.getElementsByTagName("a")[0].href)
     {
    refreshMainFrame(document.getElementsByTagName("a")[0].href);  
     }
    //-->
    </script>
    </body>
    </html>

    www.68399.com 3

    <IFRAME>用于安装文本或图片的成形图像和文字框或器皿。

    DHTML 动态超文本标识语言

    就在大家有着了剔除链接下划线的本领后,大家决定把它和二个强硬功效整合起来,那个职能便是在页面加载的时候弹出四个讯息框 alert("Welcome to my website!")。组合 CSS 和 JavaScript 的四头力量,大家拿到了贰个手艺怪兽:DHTML。

    DHTML,表示“遍布式 HTML”,那是网页开拓工具的万丈成就。它将忍受住时间的核查,它能够使大家落实广大效能,举个例子雪花从页面顶端飘落下来,或许创设可折叠的菜谱,动态的图形地图,又也许除了采纳语义标签 <div>,大家仍为能够自定义 <marquee> 标签。

    DHTML 扶植 Web 开拓从业余爱好发展到三个深思远虑的正经领域。相似 Dynamic Drive 这样的网址使您能够只是经过复制粘贴贰个 50 行的代码块,就能够解决别的难题,而不要求本身再想一想校订的毁灭措施。实际上, DHTML 正是特别时期的 Instagram Bootstrap 框架。


    对应的Javascript源代码为:

    BORDER

    像素字体

    非常时代的Computer显示屏不是超级大。作者的意思是,尽管自从阴极射线管显示器 CRT 诞生后,显示屏的尺寸的确十分的大,但是它们的分辨率不高。因而,为了足够利用像素,大家必需用 6 个像素点来代表大肆字符。

    www.68399.com 4

    从字里行间大家能够看来,当面临着那一个回顾的不能够再轻松的书体,并且当发掘到这么些字体都是由像素结合的时候,Web 开垦者们会渴望成为叁个漫画画大师。所以您会在开发银行画面上看出那三个离奇的等距像素插图,这么些开垦者的时刻和金钱借使投到那个新上市的互联网公司会发出更多的价值,实际不是荒废在装置 Photoshop 软件上。

    复制代码 代码如下:

    <IFRAME BORDER="3"></IFRAME>

    按钮

    小编信赖公众之所以讨厌IE浏览器,都以因为IE浏览器放任了此时那种最纯粹的样子

    IE 4.0 是浏览器的完备变身。它具备动态桌面。具备通道 Channels。对,正是贤人的前程似锦,那是最酷的才具,以前平素未有在市情上被应用过,一点都未曾。简单来说,IE 4 太赏心悦目了,无论你是否喜欢它,你都应该把它装到你的微型机上。

    当你归属精英团队时,你浓重明白完美的市场总值,你有意气风发种与生俱来的欢愉,你想告知每一种您遇到的人你的操纵。你,也可是独有您有必不可缺严正地做多个英豪的决定。举例决定你的客商接收什么浏览器浏览你的网址。

    www.68399.com 5

    那几个开关随地可以知道。犹如军士衣性格很顽强在荆棘载途或巨大压力面前不屈上的绶带:向大伙儿拆穿着她们为了近年来的荣誉,曾经是什么样努力战争的故事。换句话说,无论你用哪叁个编辑器(当然是 FrontPage 98卡塔 尔(英语:State of Qatar),无论你的 Web 服务器是怎样(二货,当然是 吉优Cities卡塔尔,无论是 Web 环的哪个部分(那几个按键无论怎样都将抓牢你的网址排行卡塔尔

    自己惦记这段美好的时节。近些日子大家在 Javascript上拓宽抽象,在虚幻之上又张开抽象。大家依然都不亮堂怎样正确地开展测算。每当想起大家怎么着走到几天前这一步,都令人特别大吃一惊。

    让大家骄矜地举起酒杯,帮我们二个忙:复制一群 &nbsp; 到你的下贰个代码提交中,令你的集体成员大惊失色吧。

    1 赞 收藏 2 评论

    var hex = new Array(6)

    设定围绕图像和文字框的边缘宽度

    至于作者:dcscodelife

    www.68399.com 6

    简单介绍还未赶趟写 :卡塔 尔(英语:State of Qatar) 个人主页 · 小编的篇章 · 10 ·  

    www.68399.com 7

    hex[0] = "FF"
    hex[1] = "CC"
    hex[2] = "99"
    hex[3] = "66"
    hex[4] = "33"
    hex[5] = "00"
    function display(triplet) {
    document.bgColor = '#' triplet
    }
    function drawCell(red, green, blue) {
    document.write('<TD BGCOLOR="#' red green blue '">')
    document.write('<A HREF="javascript:display('' (red green blue) '')">')
    document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>')
    document.write('</A>')
    document.write('</TD>')
    }
    function drawRow(red, blue) {
    document.write('<TR>')
    for (var i = 0; i < 6; i) {
    drawCell(red, hex[i], blue)
    }
    document.write('</TR>')
    }
    function drawTable(blue) {
    document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')
    for (var i = 0; i < 6; i) {
    drawRow(hex[i], blue)
    }
    document.write('</TABLE>') 
    }
    function drawCube() {
    document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>')
    for (var i = 0; i < 6; i) {
    document.write('<TD BGCOLOR="#FFFFFF">')
    drawTable(hex[i])
    document.write('</TD>')
    }
    document.write('</TR></TABLE>')
    }
    drawCube()

    FRAMEBODER

    那是截图 相应的Javascript源代码为: 复制代码 代码如下: var hex = new Array...

    <IFRAME FRAMEBODER="0"></IFRAME>

    设置边框是不否为3维(0=否,1=是卡塔 尔(阿拉伯语:قطر‎

    HEIGHT,WIDTH

    <IFRAME HEIGHT="31" WIDTH="88"></IFRAME>

    设质边框的上升的幅度和冲天

    SCROLLING

    <IFRAME SCROLLING="NO"></IFRAME>

    是还是不是有滚动条(YES,NO,AUTO)

    SRC

    <IFRAME SRC="GIRL.GIF"></IFRAME>

    点名IFRAME调用的文件或图表(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)

    “画中画”效果--谈IFRAME标签的选用

    综观时下网址,本来网速就有个别慢,不过大概每页都要放什么Banner,栏目图片,版权等一大堆相同的东西,当然,出于网址风格统生龙活虎、广告效应的供给,本无可非议,可毕竟让客户的卡包为那么些“点缀“的事物”日益消得钱憔悴”了,有没有一些子,让那些周围的东西二遍下载后就无须再下载,而只下载那多少个剧情有生成区域的网页内容呢?

    答案很自然:应用Iframe标识!

     

     

    黄金年代、Iframe标志的使用

    聊到Iframe,或者你早就将之扔到“被忘记的犄角”了,可是,谈到其兄弟Frame就不会素不相识了。Frame标志即帧标志,大家所说的多帧结构就是在一个浏览器窗口中突显多少个HTML文件。未来,大家境遇一种很具体的情状:如有三个学科,是风姿罗曼蒂克节后生可畏节地上,每页末尾做二个“上大器晚成节“、“下后生可畏节“的链接,除了每节教程内容不一之外,页面此外一些内容都以同等的,要是意气风发页风姿洒脱页地做笨页面,那仿佛太令人讨厌了,那时胡思乱量,如若有大器晚成种格局让页面此外地点不改变,只将课程做成风姿洒脱页豆蔻年华页的剧情页,不含别的内容,在点击上下翻页链接时,只变动教程内容部分,别的保持不改变,那样,一是省时,另则以往如教程有个一差二错的改进,也很便利,不致于牵一发而动全军了;更主要的是将那个广告Banner、栏目列表、导航等差不离每页的皆有个别东西只下载二次后就不再下载了。 Iframe标识,又叫浮动帧标识,你能够用它将叁个HTML文书档案嵌入在一个HTML中展现。它分裂于Frame标志最大的脾性即那个符号所援引的 HTML文件不是与其余的HTML文件相互独立显示,而是能够平素嵌入在叁个HTML文件中,与那几个HTML文件内容人机联作融合,成为二个安然无事,别的,还是能一再在叁个页面内体现同生机勃勃内容,而不要再次写内容,多个影像的例如即“画中画“电视机。

    现行反革命大家谈一下Iframe标志的运用。

    Iframe标识的利用格式是:

     

     

    复制代码代码如下:

    <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

     

    src:文件的门径,既不过HTML文件,也得以是文件、ASP等;

    width、height:"画中画"区域的宽与高;

    scrolling:当SRC的内定的HTML文件在钦定的区域不显不完时,滚动选项,假若设置为NO,则不出现滚动条;如为Auto:则自动现身滚动条;如为Yes,则呈现;

    FrameBorder:区域边框的宽窄,为了让“画中画“与周围的剧情相融入,常设置为0。

    比如:

     

     

    复制代码代码如下:

    <Iframe src="";; width="250" height="200" scrolling="no" frameborder="0"></iframe>

     

    二、父窗体与浮动帧之间的相互决定 在脚本语言与指标等级次序中,包蕴Iframe的窗口我们称为父窗体,而浮动帧则称为子窗体,弄清那四头的涉及很主要,因为要在父窗体中访谈子窗体或相反都必得精晓对象档期的顺序,技术通进度序来做客并决定窗体。

    1、在父窗体中访谈并调节子窗体中的对象

    在父窗体中,Iframe即子窗体是document对象的三个子对象,能够直接在本子中访谈子窗体中的对象。

    近年来就有叁个标题,即,大家如何来支配那几个Iframe,这里须要讲一下Iframe对象。当大家给那个符号设置了ID 属性后,就可经过文书档案对象模型DOM对Iframe所含的HTML进行大器晚成多种决定。

    诸如在example.htm里停放test.htm文件,并调节test.htm里一些标记对象:

     

     

    复制代码代码如下:

    <Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>

    test.htm文件代码为:

    <html>

    <body>

    <h1 id="myH1">hello,my boy</h1>

    </body>

    </html>

     

    如我辈要改成ID号为myH1的H1标识里的文字为hello,my dear,则可用:

    document.myH1.innerText="hello,my dear"(其中,document可省)

    在example.htm文件中,Iframe标志对象所指的子窗体与日常的DHTML对象模型生机勃勃致,对指标访谈调整情势相符,就不再赘述。

    2 、在子窗体中会见并操纵父窗体中对象

    在子窗体中大家能够因而其parent即父(双亲卡塔尔对象来访问父窗口中的目的。

    如example.htm:

     

     

    复制代码代码如下:

    <html>

    <body onclick="alert(tt.myH1.innerHTML)">

    <Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>

    <h1 id="myH2">hello,my wife</h1>

    </body>

    </html>

     

    要是要在frame1.htm中做客ID号为myH第22中学的标题文字并将之改为"hello,my friend",大家就可以如此写:

    parent.myH2.innerText="hello,my friend"

    这里parent对象就象征当前窗体(example.htm所在窗体),要在子窗体中拜见父窗体中的对象,无生龙活虎例外都通过parent对象来扩充。

    Iframe纵然内嵌在另三个HTML文件中,但它保持相对的单身,是多个“一齐天下“哟,在单生机勃勃HTML中的特性相像适用于浮动帧中。

    试想一下,通过Iframe标识,我们可将这个不改变的内容以Iframe来代表,那样,不必再次写雷同的原委,那有一些象程序设计中的过程或函数,减省了不怎么冗杂的手工业劳动!其它,至关心爱戴要的是,它使页面包车型客车改改动为平价,因为,不必因为版式的调节而改进各个页面,你只需修改五个父窗体的版式就可以了。

    有几许要静心,Nestscape浏览器不辅助Iframe标识,但在现阶段IE的天下,这就像也无大碍,布满应用Iframe标志,既为本人(网址)着了想,又为网上朋友节省了网费,何乐不为?

    例子

     

     

    复制代码代码如下:

    <iframe src="页面" width="宽度" height="高度" align="排列能够是left或right,center" scrolling="是还是不是有滚动条能够填no或yes" ></iframe>

    <IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="bgm/bgm.html" width=300></IFRAME>

     

    2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    用了iframe后 开掘滚动条不佳好 想用2个图片来代替↑↓

    相应怎么贯彻呢?

    回答:

    用下列代码替换网页的

     

     

    复制代码代码如下:

    <title>..</title>

    <SCRIPT LANGUAGE="javascript">

    function scroll(n)

    {temp=n;

    Out1.scrollTop=Out1.scrollTop temp;

    if (temp==0) return;

    setTimeout("scroll(temp)",80);

    }

    </SCRIPT>

    <TABLE WIDTH="330">

    <TR>

    <TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >

    <DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">

    文字

    文字

     

    文字

     

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:鼠标选用动态改动网页背景颜色的JS代码

    关键词: 68399皇家赌场 基础技术