在输入我的温度，湿度，人数字段时，我希望我的速度n温度字段自动变色。就像当我输入温度= 1，Humidity = 1，Number of people = 1，点击sumbit按钮时我想要Speed n Temperature field -1st box应该变色。类似地，在给出不同的输入时，我希望我的速度n温度盒应该变色。我该怎么办？任何形式的帮助都会有用!!
<html>
<frameset rows="50%,50%">
<frame name="top" src="k7.php"/>
<frame name="bottom" src="n3.html"/>
</frameset>
</html>
这是我的k7.php代码
<?php
session_start();
if( $_SERVER['REQUEST_METHOD']=='POST' ){
if( !empty( $_POST['bttn'] ) && !empty( $_POST['type'] ) ){
$type=$_POST['type'];
$bttn=$_POST['bttn'];
$_SESSION['buttonClicked'][ $type ]=$bttn;
exit( json_encode( $_SESSION['buttonClicked'] ) );
}
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Set Colours of Buttons</title>
<style>
.green{
background-color: green;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.blue{
background-color: blue;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.yellow{
background-color: yellow;
border: 1px solid black;
color: black;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.red{
background-color: red;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
input[type='button']{
border: 1px solid black;
padding: 8px 30px;
margin:0 0.25rem;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
</style>
<script>
(function(){
var colours={
1:'red',
2:'blue',
3:'green',
4:'yellow'
};
var flags={
passive:true,
capture:false
};
function setcolours(e){
var _class=this.dataset.class;
var col=this.parentNode.querySelectorAll('input[type="button"][data-class="'+_class+'"]');
/* Clear previous colour classes assigned */
col.forEach(function(e,i,a){
Object.values( colours ).forEach(function( c ){
e.classList.remove( c );
});
});
/* Add colour class to any element with a value equal to or less that selected button value */
for( var i=this.value; i > 0; i-- ){
try{
if( col[ i - 1 ].nodeType==1 )col[ i - 1 ].classList.add( colours[ col[ i - 1 ].value ] )
}catch( err ){
console.info( err );
continue;
}
}
ajax( this.value, this.dataset.type );
}
function ajax( value, type ){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
document.getElementById('results').innerHTML=this.response;
}
};
var params='bttn='+value+'&type='+type;
xhr.open( 'post', location.href, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( params );
}
function bindEvents(e){
var col = document.querySelectorAll('input[type="button"]');
if( col && col.length > 0 ){
for( var n in col ){
if( col[ n ].nodeType==1 ){
col[ n ].addEventListener( 'click', setcolours.bind( col[ n ] ), flags );
}
}
}
}
document.addEventListener( 'DOMContentLoaded', bindEvents, flags );
}());
</script>
</head>
<body>
<div align="left">Temperature </div>
<input type="button" class="button" data-class='b' data-type='temperature' value="1">
<input type="button" class="button" data-class='b' data-type='temperature' value="2">
<input type="button" class="button" data-class='b' data-type='temperature' value="3">
<input type="button" class="button" data-class='b' data-type='temperature' value="4">
<br />
<br />
<div align="left">Humidity</div>
<input type="button" class="button1" data-class='b1' data-type='humidity' value="1">
<input type="button" class="button1" data-class='b1' data-type='humidity' value="2">
<input type="button" class="button1" data-class='b1' data-type='humidity' value="3">
<input type="button" class="button1" data-class='b1' data-type='humidity' value="4">
<br />
<br />
<div align="left">Number of people </div>
<input type="button" class="button2" data-class='b2' data-type='people' value="1">
<input type="button" class="button2" data-class='b2' data-type='people' value="2">
<input type="button" class="button2" data-class='b2' data-type='people' value="3">
<input type="button" class="button2" data-class='b2' data-type='people' value="4">
<br />
<br />
<input type='submit' value='submit'>
</form>
<pre id='results'></pre>
</body>
</html>
这是我的n3.html代码
<html>
<head>
<style>
.box1 {
width: 100px;
height: 45px;
margin: 0px;
padding: 0px;
float: left;
background-color:white;
border: 1px solid black;
}
</style>
</head>
<body>
<div align="left">Speed: </div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<br><br>
<br>
<div align="left">Temperature: </div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
<div align="right" class="box1"></div>
</body>
</html>
答案 0 :(得分：0)
希望以下内容能够以某种方式适应您的框架集布局 - 它使用了一个新功能，但在其他方面与之前的答案相同（或多或少）
<?php
session_start();
$svar='buttonClicked';
if( $_SERVER['REQUEST_METHOD']=='POST' ){
if( !empty( $_POST['bttn'] ) && !empty( $_POST['type'] ) ){
$type=$_POST['type'];
$bttn=$_POST['bttn'];
$_SESSION[ $svar ][ $type ]=$bttn;
header( 'HTTP/1.1 200 OK', true, 200 );
header( 'Content-Type: application/json' );
exit( json_encode( $_SESSION[ $svar ] ) );
}
}
if( !empty( $_GET['reset'] ) && $_GET['reset']=='true' && isset( $_SESSION[ $svar ] ) ){
unset( $_SESSION[ $svar ] );
header('Location: '.$_SERVER['SCRIPT_NAME'] );
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Set Colours of Buttons</title>
<style>
body, body *{
font-family:calibri,verdana,arial;
font-size:1rem;
color:black;
}
input[type='button']{
background-color:white;
border: 1px solid black;
padding: 0.5rem 2rem;
margin:0 0.25rem;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.green{
background-color: green!important;
}
.blue{
background-color: blue!important;
}
.yellow{
background-color: yellow!important;
}
.red{
background-color: red!important;
}
.pink{
background-color: pink!important;
}
.orange{
background-color: orange!important;
}
.purple{
background-color: purple!important;
}
.brown{
background-color: brown!important;
}
legend,fieldset{
border:none;
}
legend{
border-bottom:1px solid gray;
border-left:3px solid black;
padding:0.5rem;
margin:0 0 0 0.25rem;
}
fieldset.boxes > div{
width: 4.5rem;
height: 2rem;
margin: 0 0.25rem;
padding: 0;
float: left;
background-color:white;
border: 1px solid black;
}
</style>
<script>
(function(){
var obj={};
var colours={
1:'red',
2:'orange',
3:'yellow',
4:'pink',
5:'brown',
6:'purple',
7:'blue',
8:'green'
};
var flags={
passive:true,
capture:false
};
function setcolours(e){
var col=this.parentNode.querySelectorAll( 'input[type="button"]' );
obj[ this.parentNode.dataset.type ]=this.value;
/* Clear previous colour classes assigned */
col.forEach(function(e,i,a){
Object.values( colours ).forEach(function( c ){
e.classList.remove( c );
});
});
/* Add colour class to any element with a value equal to or less that selected button value */
for( var i=this.value; i > 0; i-- ){
try{
if( col[ i - 1 ].nodeType==1 )col[ i - 1 ].classList.add( colours[ col[ i - 1 ].value ] )
}catch( err ){
console.info( err );
continue;
}
}
/* set the colour of div boxes */
setboxes.call( this, e, obj );
/* send the ajax request to store values into session variables &/or whatever actions are required */
ajax( this.value, this.parentNode.dataset.type );
}
/* new function to set colour of boxes if all buttons clicked have same value */
function setboxes( event, _obj ){
/* get references from global obj */
var keys=Object.keys( _obj );
var values=Object.values( _obj );
if( keys.length==3 ){
/* Are all items of the same value? */
var value=values.reduce( function(a,b){ return a==b ? a : false } );
/* get nodelist of boxes */
var col=document.querySelectorAll('fieldset.boxes div');
/* If the values are all the same - set colour */
if( value ){
/* clear previous colour - if any */
col.forEach(function(e,i,a){
Object.values( colours ).forEach(function( c ){
e.classList.remove( c );
});
});
/* assign new colour */
for( var i=value; i > 0; i-- ){
try{
col.forEach(function(item,index,array){
if( item.dataset.value <= value )item.classList.add( colours[ value ] );
});
}catch( err ){
console.info( err )
continue;
}
}
} else {
/* mismatch in values - remove colours */
col.forEach(function(e,i,a){
Object.values( colours ).forEach(function( c ){
e.classList.remove( c );
});
});
/* ???? */
values.forEach( function(value){
col.forEach( function(box){
if( box.dataset.value <= value ) box.classList.add( colours[ box.dataset.value ] )
});
});
}
}
}
function ajax( value, type ){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
document.getElementById('results').innerHTML=this.response;
}
};
var params='bttn='+value+'&type='+type;
xhr.open( 'post', location.href, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( params );
}
function reset(e){
location.search='reset=true';
}
function bindEvents(e){
var col = document.querySelectorAll('form > fieldset > input[type="button"]');
if( col && col.length > 0 ){
for( var n in col ){
if( col[ n ].nodeType==1 ){
col[ n ].addEventListener( 'click', setcolours.bind( col[ n ] ), flags );
}
}
}
var bttn = document.querySelectorAll('form > input[ type="reset" ]')[0];
bttn.onclick=reset;
}
document.addEventListener( 'DOMContentLoaded', bindEvents, flags );
}());
</script>
</head>
<body>
<form action='chk.php' method='post'>
<fieldset data-type='temperature'>
<legend>Temperature</legend>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="7" />
<input type="button" value="8" />
</fieldset>
<fieldset data-type='humidity'>
<legend>Humidity</legend>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="7" />
<input type="button" value="8" />
</fieldset>
<fieldset data-type='people'>
<legend>Number of people</legend>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="7" />
<input type="button" value="8" />
</fieldset>
<br />
<br />
<fieldset class='boxes' data-type='box-speed'>
<legend>Speed</legend>
<div data-value=1></div>
<div data-value=2></div>
<div data-value=3></div>
<div data-value=4></div>
<div data-value=5></div>
<div data-value=6></div>
<div data-value=7></div>
<div data-value=8></div>
</fieldset>
<fieldset class='boxes' data-type='box-temperature'>
<legend>Temperature</legend>
<div data-value=1></div>
<div data-value=2></div>
<div data-value=3></div>
<div data-value=4></div>
<div data-value=5></div>
<div data-value=6></div>
<div data-value=7></div>
<div data-value=8></div>
</fieldset>
<input type='submit' value='submit'>
<input type='reset' value='reset'>
</form>
<pre id='results'></pre>
</body>
</html>