Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

静态服务貌似不稳定,图片加载不出来,重现概率很大
  • Loading branch information...
commit 8a6d122fbfba0c7b626f3db84ac06914fcdd4fd6 1 parent c675a37
jicheng.li authored
View
81 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>
View
BIN  images/qr1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/qr2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/qr3.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
4 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);
Please sign in to comment.
Something went wrong with that request. Please try again.