当前位置:首页 > 网页特效 > 颜色背景 >

网页风格适时切换

时间:2014-07-04 08:15 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 现在流行网页风格适时切换,让用户自己设置他喜欢的风格,特别是一些论坛大多都附带了此功能,其实用JavaScript可以轻松实现这种功能,在本段代码中,鼠标移上代表某种颜色的小格子时,网页的背景颜色会跟着改变,再完善一些的话,可以加入Cookie,这样刷新网页后就可以保持用户选择的颜色。
  • <html>
    <head>
    <title>网页颜色风格适时切换</title>
    <script language="JavaScript">
    lck=0;
    function r(hval)
    {
    if ( lck == 0 )
    {
    document.bgColor=hval;
    }
    }
    function l()
    {
    if (lck == 0)
    {
    lck = 1;
    }
    else
    {
    lck = 0;
    }
    }
    </script>
    </head>
    <body>
    <table border="0" cellpadding="0" border="0">
    <tr>
    <td bgcolor="#00ffff"><a href="JavaScript:l()"
    onmouseover="r('#00ffff'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#663399"><a href="JavaScript:l()"
    onmouseover="r('#663399'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#669933"><a href="JavaScript:l()"
    onmouseover="r('#669933'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#990033"><a href="JavaScript:l()"
    onmouseover="r('#990033'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#666600"><a href="JavaScript:l()"
    onmouseover="r('#666600'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#663366"><a href="JavaScript:l()"
    onmouseover="r('#663366'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#000000"><a href="JavaScript:l()"
    onmouseover="r('#000000'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#FF0000"><a href="JavaScript:l()"
    onmouseover="r('#FF0000'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#CC6600"><a href="JavaScript:l()"
    onmouseover="r('#CC6600'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#CC3399"><a href="JavaScript:l()"
    onmouseover="r('#CC3399'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#666699"><a href="JavaScript:l()"
    onmouseover="r('#666699'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#660033"><a href="JavaScript:l()"
    onmouseover="r('#660033'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#330033"><a href="JavaScript:l()"
    onmouseover="r('#330033'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#333300"><a href="JavaScript:l()"
    onmouseover="r('#333300'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#FFFF00"><a href="JavaScript:l()"
    onmouseover="r('#FFFF00'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#9900CC"><a href="JavaScript:l()"
    onmouseover="r('#9900CC'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#FFCC66"><a href="JavaScript:l()"
    onmouseover="r('#FFCC66'); return true"><img src="" border="0" width="10" height="10"></a></td>
    <td bgcolor="#FFFFFF"><a href="JavaScript:l()"
    onmouseover="r('#FFFFFF'); return true"><img src="" border="0" width="10" height="10"></a></td>
        </tr>
    </table>
    </body>
    </html>

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-yanse/9745.html
下一篇:没有了

颜色背景下载排行

最新文章