動的cssとjavascript PHPでmysqlデータベースに投稿

私はAdobe Flashを使用するか、javascriptを使用して動的な蝶のウェブサイトを作成するかの選択肢があります。 PHPを使用してMySqlに送信するために選択された色を作成するにはどうすればよいですか？動的cssと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スクリプトで画像を使用することを検討する必要があります。私はかなりの数ヶ月のためにこれに固執されているので、上のアドバイスをしてください。

出典

2016-10-18 Schalk

これは、あなたが隠し入力にクリックされたボタンの色を保存する方法である：

<button class="color-selector" onclick="blue()">blue button</button> 
<button class="color-selector" onclick="yellow()">yellow button</button> 
... 
<input hidden type='text' id='selected' name='selected'/> 

<script> 
    var colorsToBeSelected = document.querySelectorAll('.color-selector'); 
    var selected = document.getElementById('selected'); 
    for(var i = 0; i < colorsToBeSelected.length; i++){ 
    colorsToBeSelected[i].addEventListener("click", function(event){ 
     selected.value = window.getComputedStyle(this).getPropertyValue('background'); 
    }) 
    } 
</script>

毎回ユーザーが色のボタンのいずれかをクリックすると、プロパティは、あなたの入力値に格納されようとしている背景です。あなたが画像を言及したように背景（は、色の背景色を考慮に入れて）。投稿時に$ _POST ['が選択されました'] - の入力名として保存されます。

出典

2016-10-18 12:59:57 wscourge

あなたの答えのwscourgeいただきありがとうございます。これは間違いなく素晴らしい選択肢になります。 – Schalk

私はあなたの提案を試みましたが、 "値なし"を返します。 – Schalk

値はどこですか？ – wscourge

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

出典

2016-10-18 13:10:23 Kazz

すばやい返信ありがとうございました。すべてのブラウザでクッキーが有効になっているわけではないことを心配しています。 – Schalk

@Schalkはajax呼び出しを使用し、phpは最後の色をセッションに保存し、ページ内容を出力する際には次のようにします： '$ {SESSION ['last-color'] == 'yellow'）{echo ' ';} ' – Kazz

動的cssとjavascript PHPでmysqlデータベースに投稿

答えて

関連する問題