Question

我正在处理一个看起来像这样的页脚生成器：

当人们填写数据时，它会生成代码和预览图像。

目前它仅适用于商标和公司名称。我想在这里实现的是当人们填满这个领域＆＃34;你的颜色＆＃34;有了一些颜色值，我希望用输入的颜色来改变预览的背景颜色。实现这一目标的最佳方法是什么？最终我希望显示输入的值。我并没有要求代码只是朝着正确的方向发展。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="resources/style.css">
    </head>

    <body>

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Footer Generator</a>
                </div>

                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                </ul>
            </div>
        </nav>

        <!-- Customize your footer and submit -->
        <div id="container">

        <form class ="form" method="post">

            <h3>Select your trademark</h3>

                <select class="form-control" name="trademark" action="">

                    <option></option>
                    <option>©</option>
                    <option>™</option>
                    <option>®</option>

                </select>

            <h3>Your company name</h3>

                <input class="form-control" type="text" name="companyName" placeholder="Your company name" />

                <h3>Your Color</h3>

                <input class="form-control" type="text" name="customColor" placeholder="Type in the value of your color e.g #ffffff" />

                <br/>
                <br/>

                <button class="form-control" type= "submit" name= "submit">Generate</button>
        </form>

        <!-- Shows raw code on click -->





        <!-- script for the preview image -->

<?php

function footerPreview ()
{
echo "<h3>Preview:</h3>";
date_default_timezone_set('UTC');
$trademark = $_POST["trademark"];
$company = $_POST["companyName"];       
$date = date("Y");          
echo "<div id='footer_date'>$trademark $date $company </div>";
}


// generate result for the head
function rawHead()
{
$head = htmlspecialchars('<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
</head>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your head tags</h4>$head</pre>";
}



// generate result for the body
function rawBody ()
{
$body1of5 = htmlspecialchars('<div id="footer_date">',ENT_QUOTES);
$body2of5 = $_POST["trademark"];
$body3of5 = date("Y");          
$body4of5 = $_POST["companyName"];
$body5of5 = htmlspecialchars('</div>',ENT_QUOTES);
echo "<pre><h4>Put this code inside your body tags</h4>$body1of5 $body2of5 $body3of5 $body4of5 $body5of5 </pre>";
}

// generate result for the CSS
function rawCSS () 
{
$theCSS = htmlspecialchars('color:#ffffff;
width:100%;
background-color:rgba(0, 0, 0, 0.6);
text-align:center;
padding-top:15px;
height:50px;
font-family: "Raleway", sans-serif;
position:fixed;
right: 0;
bottom: 0;
left: 0;',ENT_QUOTES);
echo "<pre><h4>Put this code in your websites stylesheet</h4>$theCSS</pre>";
}

    // Generate everything

    if(isset($_POST['submit']))

    {
        footerPreview();
        rawHead();
        rawBody();
        rawCSS();
    } 

?>


</div>

<div id="generated_footer_date"> © 2016 Footer Generator </div> 

</body>
</html>

Answer 1

您有两种方法可以做到这一点：

生成新的样式表文件，我的意思是创建另一个文件，并动态链接此文件

不使用外部样式表文件并在页面中使用样式....通过这种方式，您可以使用来自数据库或其他地方的动态代码替换您的代码。所以你可以修改你的rawCSS();函数并插入类似的东西

function rawCSS ($color = '#FF0') 
{
    $theCSS = htmlspecialchars("color:#ffffff;
    width:100%;
    background-color: ${color};
    text-align:center;
    padding-top:15px;
    height:50px;
    font-family: 'Raleway', sans-serif;
    position:fixed;
    right: 0;
    bottom: 0;
    left: 0;",ENT_QUOTES);
    echo "<pre><h4>Put this code in your websites stylesheet</h4>$theCSS</pre>";
}

我故意用双引号改为支持插值字符串....

所以在那之后哟必须从query string或database中提取颜色，就是这样。

Answer 2

您可以使用JavaScript动态加载元素，可能是JQuery，以便更轻松地选择和更改元素。我有一个如何动态更改页面中任何元素颜色的示例：

$('body').on('blur', '#stylemenowcolor', function(){
  $('.stylemenow').css('background-color', '#' + $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="stylemenow">
  test
</div>

<input placeholder="(e.g. 00ff00)" type="text" id="stylemenowcolor">

如何使用动态CSS

2 个答案: