Permalink
Browse files

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

静态服务貌似不稳定,图片加载不出来,重现概率很大
  • Loading branch information...
1 parent c675a37 commit 8a6d122fbfba0c7b626f3db84ac06914fcdd4fd6 jicheng.li committed Feb 28, 2013
Showing with 84 additions and 1 deletion.
  1. +81 −0 backend.html
  2. BIN images/qr1.png
  3. BIN images/qr2.png
  4. BIN images/qr3.png
  5. +3 −1 javascripts/main.js
View
@@ -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>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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);

0 comments on commit 8a6d122

Please sign in to comment.