用cookie实现简单的用户自定义页面样式 -

首页 > 博客列表 > 用cookie实现简单的用户自定义页面样式

博主信息

博文 20

粉丝 1

访问量 21238

专题推荐

更多>

效果演示

代码演示如下：
首先创建一个one.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户自定义页面样式</title>
        <script src="cookie.js"></script>
        <style type="text/css">
            a{
                color: #000000;
                text-decoration: none;
                transition: all .5s;
            }
            a:hover{
                background-color: #f3f3f3;
            }
        </style>
    </head>
    <body>
        <input type="button" onclick="setBgColor('red')" value="设置页面背景色">
        <input type="button" onclick="setFontColor('yellow')" value="设置字体色">
        <p><a href="two.html">点击跳转到自定义样式的页面</a></p>
        <script>
            function setBgColor() {
                color = window.prompt("请输入页面背景颜色");
             setCookie('bgcolor', color, 3);
            }
            function setFontColor(color) {
                color = window.prompt("请输入字体颜色");
                setCookie('fontcolor', color, 3);
            }
        </script>
    </body>
</html>

然后是two.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义过后的页面样式</title>
        <style id="st"></style>
        <script src="cookie.js"></script>
    </head>
    <body>
        <h1>这是一个h1标签</h1>
        <h2>这是一个h2标签</h2>
        <p>这是一个段落标签</p>
    </body>
    <script>
        window.onload = function() {
            var bgcolor = getCookie('bgcolor');
            var fontcolor = getCookie('fontcolor');
            var stobj = document.getElementById('st');
            stobj.innerText = ' * {background-color:' + bgcolor + ';color:' + fontcolor + ';}';
        }
    </script>
</html>

最后编写设置cookie的js代码，cookie.js

//设置cookie
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
//获取cookie
function getCookie(cname){
    var name = cname + "=";
    console.log(name);
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端基础，表单、表格

2021-11-11 15:40:10

什么是 Cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

效果演示