Question

我可以选择使用Adobe Flash还是使用javascript来创建动态弓弦网站。如何使用PHP创建选择提交给MySql的颜色？

<html>
<head>
<TITLE>Cool Javascript</title>
<style>
body {
      background-color: linen;
      margin: 0;
}

    #blueDiv {
        position: absolute;
        top: 100px;
        background-color: blue;
        width: 150px;
        height: 150px;          
      }
    #yellowDiv {
      position: absolute;
      top: 100px;
        background-color: yellow;
        width: 150px;
        height: 150px;  
        }
</style>
</head>
<body>
<button onclick="blue()"> blue button </button>

<button onclick="yellow()"> yellow button </button>
    <div id="blueDiv">
    </div>
    <script>
        var div = document.getElementById('blueDiv');
        function blue() {
            div.setAttribute("id", "blueDiv");
            }
        function yellow() {
            div.setAttribute("id", "yellowDiv");
            }
    </script>
    </body>
</html>

我可能需要考虑在我的css脚本中使用图像。请注意以上内容，因为我已经坚持了几个月。

Answer 1

这是将点击按钮的颜色保存到隐藏输入的方式：

＆＃13;

{% csrf_token %}

＆＃13;

var colorsToBeSelected = document.querySelectorAll('.color-selector');
var selected = document.getElementById('selected');
colorsToBeSelected.forEach(color => {
 color.addEventListener('click', (e) => {
   selected.value = window.getComputedStyle(color).getPropertyValue('background');
   console.log(selected.value, 'was selected');
 });
});

＆＃13;

.blue { background: blue; }
.yellow { background: yellow; }

＆＃13;

每当用户点击任何彩色按钮时，它的背景属性将存储在您的输入值中。背景，正如您提到的图像（仅考虑颜色的背景颜色）。提交后，它将被存储为<button class="color-selector blue">blue button</button> <button class="color-selector yellow">yellow button</button> ... <input hidden type='text' id='selected' name='selected'/>，其中$_POST['selected']是输入'selected'属性的值。

Answer 2

如何使用cookie？像：

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
} 

function blue() {
    div.setAttribute("id", "blueDiv");
    setCookie('last-color', 'blue', 3);
}


function yellow() {
    div.setAttribute("id", "yellowDiv");
    setCookie('last-color', 'yellow', 3);
}

if(getCookie('last-color') == 'yellow'){
    yellow();
}

函数setCookie和getCookie来自：http://www.w3schools.com/js/js_cookies.asp

动态css和javascript使用php

2 个答案: