完成后台页面，实时显示三种颜色

静态服务貌似不稳定，图片加载不出来，重现概率很大
deemstone · Feb 28, 2013 · 8a6d122 · 8a6d122
1 parent c675a37
commit 8a6d122
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 1 deletion.
diff --git a/backend.html b/backend.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>GOOGLE</title>
+		 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
+		<style type="text/css">
+			#chrome{
+				width: 90px;
+				margin: 45px auto;
+			}
+			#chrome img{
+				width: 100%
+			}
+			#container{
+				max-width: 750px;
+				margin: auto;
+			}
+			.channel{
+				width: 33%;
+				float: left;
+				position: relative;
+				text-align: center;
+			}
+			.color{
+				width: 80%;
+				height: 160px;
+				margin: auto;
+				box-shadow: 0 0 8px;
+			}
+			.channel img{
+				width: 40%;
+				margin: 20px;
+			}
+		</style>
+	</head>
+	<!-- 弹性布局 -->
+	<body>
+		<h1 id="chrome"><img src="images/chrome.png"></img></h1>
+
+		<div id="container">
+			<div class="channel">
+				<div class="color"></div>
+				<img src="images/qr1.png"></img>
+			</div>
+			<div class="channel">
+				<div class="color"></div>
+				<img src="images/qr2.png"></img>
+			</div>
+			<div class="channel">
+				<div class="color"></div>
+				<img src="images/qr3.png"></img>
+			</div>
+		</div>
+		<script type="text/javascript" src="socket.io/socket.io.js" charset="utf-8"></script>
+		<script type="text/javascript">
+		//	window.onload = function(){
+				var url = 'http://'+ window.location.host +'/?c=';
+				var channels = document.querySelectorAll('.channel');
+				var i,el;
+				for(i = 1; i<=channels.length; i++){
+					el = channels[i-1];
+					var a = document.createElement('a');
+					a.href = url + i;
+					a.innerHTML = url + i;
+					el.appendChild( a );
+				}
+				var socket = io.connect();
+				socket.on('color', function (data) {
+					console.log(data);
+					var colors = document.querySelectorAll('div.color');
+					colors[0].style.background = data[0];
+					colors[1].style.background = data[1];
+					colors[2].style.background = data[2];
+					//document.body.style.backgroundColor = data[c-1];
+					//socket.emit('my other event', { my: 'data' });
+				});
+		//	};
+		</script>
+	</body>
+</html>
diff --git a/images/qr1.png b/images/qr1.png
diff --git a/images/qr2.png b/images/qr2.png
diff --git a/images/qr3.png b/images/qr3.png
diff --git a/javascripts/main.js b/javascripts/main.js
@@ -363,7 +363,7 @@ var checkHo = (function(){
 
 	var _current_step = 0;
 	//different behavior every step
-	var changeStep = function(n){
+	var changeStep = window.changeStep = function(n){
 		if(n == _current_step) return;
 
 		if(n == 1){
@@ -475,6 +475,8 @@ window.onload = function() {
 	//判断url是否带参数，并取出参数
 	if( c && c[1] ){
 		c = c[1];
+		changeStep(2);
+		changeStep(3);
 		var socket = io.connect();
 		socket.on('color', function (data) {
 			console.log(data);