|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <h1 id="heading">I'm thinking of a number……</h1> <table> <tr> <td id="low"></td> <td id="mid"></td> <td id="high"></td> </tr> </table> <label id="prompt"></label><input type="text" id="input"> <script> window.onload = newgame; window.onpopstate = popState; var state,ui; function newgame(playagain) { ui={ heading:null, prompt:null, input:null, low:null, mid:null, high:null }; for(var id in ui){ ui[id] = document.getElementById(id); } ui.input.onchange = handleGuess; state = { n:Math.floor((99 * Math.random())+1), low:0, high:100, guessum:0, guess:undefined } display(state); if(playagain === true){ save(state) } } function save(state) { if(!history.pushState){return} var url = "#guess"+state.guessum; history.pushState(state,"",url); } function popState(event) { if(event.state){ state=event.state; display(state) } else { history.replaceState(state,"","#guess"+state.guessum) } } function handleGuess() { var g = parseInt(this.value); if((g>state.low) && (g<state.high)){ if(g<state.n){state.low=g} else if(g>state.n){state.high=g} state.guess=g; state.guessum++; save(state); display(state); } else { alert("请输入一个数值"+state.low+"~"+state.high) } } function display(state) { ui.heading.innerHTML = document.title = "I'm thinking of a number between"+state.low+ " and " +state.high; ui.low.style.width = state.low+"%"; ui.mid.style.width = (state.high-state.low)+"%"; ui.high.style.width = (100-state.high)+"%"; ui.input.style.visibility = "visible"; ui.input.value = ""; ui.input.focus(); if(state.guess == undefined){ ui.prompt.innerHTML="Type yor guess and hit enter:" } else if(state.guess>state.n){ ui.prompt.innerHTML= state.guess+" is too high,Guess again" } else if(state.guess<state.n){ ui.prompt.innerHTML= state.guess+" is too low,Guess again" } else { ui.input.style.visibility="hidden"; ui.heading.innerHTML=document.title= state.guess+" is correct"; ui.prompt.innerHTML=" you win <button onclick='newgame(true)'>Play Again</button>" } } </script> </body> </html> |
分类：计算机
ES6(二)解构赋值
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
{ //数组解构赋值 let [a,b,c,[d,e=5]]=[1,2,3,[4]]; console.log(a,b,c,d,e) } { function* fibs() { var [a,b]=[0,1]; while (true) { yield a; [a,b]=[b,a+b]; } } var [first,second,third,fourth,fifth,sixth]=fibs(); console.log(sixth);//5 } { //对象解构赋值 var {foo:baz,bar}={foo:"aaaa",bar:"bbbb"}; console.log(baz); console.log(bar); } { //字符串解构赋值 const [a,b,c,d,e]="hello"; console.log(a,b,c,d,e); let {length:len}="hello"; console.log(len); } { //数值、布尔值解构赋值 let {toString:s} = 123; let {toString:t} = true; console.log(s === Number.prototype.toString); console.log(t === Boolean.prototype.toString); } { //函数参数解构赋值 var tmp=[[1,2],[3,4]].map(([a,b])=>a+b); console.log(tmp); function move({x=0,y=0}={}) { return [x,y]; } move({x:3,y:6}); move({x:3}); move({}); move(); function go({x,y}={x:0,y:0}) { return [x,y]; } go({x:6,y:9}); go({x:6}); go({}); go(); } { var map = new Map(); map.set('first','hello'); map.set('second','world'); for(let [key,value] of map){ console.log(key+" is "+ value); } for(let [key] of map){ console.log(key); } for(let [,value] of map){ console.log(value); } } |
参考链接:ES6标准入门
ES6(一)let、const
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
{ let a=100; var b=200; } //console.log(a); //a is not defined console.log(b); { var c=[],d=[]; for(let i=0;i<10;i++){ c[i]=function () { console.log(i) }; } for(var j=0;j<10;j++){ d[j]=function () { console.log(j) }; } c[3]();//3 d[3]();//10 } { console.log("let 不存在变量提升"); console.log("const 不存在变量提升") } { console.log("暂时性死区TDZ,本质：块作用域+不存在变量提升"); var tmp=111; if(true) { // tmp="qqq"; //tmp is not defined // console.log(tmp); let tmp; console.log(tmp); } } { console.log("let不允许相同作用域重复申明变量") } { console.log("let实际上为js增加了块级作用域"); function fn1() { let n=5; if(true) { let n=666; } console.log(n);//5 } fn1() } { console.log("const声明常量，一旦声明便不能改变"); console.log("import、export浏览器不支持需要转码"); //跨模块常量 //constants.js // export const A = 1; // export const B = 2; // export const C = 3; //test1.js // import * as constants from './constants'; // console.log(constants.A); // console.log(constants.B); //test2.js // import {A,B} from './constants'; // console.log(A); // console.log(B); } { console.log("全局对象的熟属性"); var e=9; console.log(window.e);//9 let f=10; console.log(window.f);//undifined } |
参考链接:ES6标准入门
HTML5API之地理位置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
//基本操作 function getCurrent() { navigator.geolocation.getCurrentPosition(function (pos) { console.log(pos); document.getElementById('currentPos').innerHTML=pos.coords.latitude; document.getElementById('currentPos').innerHTML=pos.coords.longitude; } ) } //从谷歌地图获取地理位置图片:国内需代理 function getMap() { var image=document.createElement("img"); navigator.geolocation.getCurrentPosition(setMapURL); return image; function setMapURL(pos) { var url = "http://maps.google.com/maps/api/staticmap"+"?center="+pos.coords.latitude+","+pos.coords.longitude+"&size=640x640&sensor=true"; var zoomlevel=20; if(pos.coords.accuracy>80){ zoomlevel -= Math.round(Math.log(pos.coords.accuracy/50)/Math.LN2); } url += "&zoom="+zoomlevel; image.src=url; } } //全部操作 function whereami(elt) { var options={ enableHighAccuracy:false, //true:高精度，false:默认值，近似值 maximumAge:3000, //5分钟左右:愿意等待获取位置信息时长，默认值无限时长 timeout:15000 //不要超过15s } if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(success,error,options) } else { elt.innerHTML="啥破玩意儿，不支持该功能" } function error(e) { //1:用户不允许 //2:浏览器无法确定位置 //3:超时 elt.innerHTML=e.code+":"+e.message } function success(pos) { //pos.coords.altitude:海拔信息 //pos.coords.speed:速度航向信息 } } |
前端优化建议
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
1、合并js、css等文件 2、图片映射（sprites技术） 3、压缩文本、图片（Png格式优先） 4、延迟侠士可见域外内容 5、确保功能性图片优先加载 6、精简代码，项目上线时尽量压缩和删除不必要的注释 7、最下化重定向 8、CDN 9、css放头、js放尾 10、合理利用浏览器缓存 11、gzip（需要服务器配置） 12、尽量避免使用table 13、最好明确规定图片大小（减少浏览器计算时间） 14、减少HTTP请求数 15、减少不必要的HTTP跳转 16、js少使用with、eval、Function 17、js减少作用域链查找 18、#header a{ color:#ccc;}浏览器从右至左识别：先遍历所有a的祖先。（少使用） |
交通灯实训代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 |
//将交通等分为东西向，南北向两组，前四个LED划为A组为东西向，后四个划为B组为南北向 #include <REG52.H> #define uchar unsigned char sbit wei0=P2^2;//定义数码管的位选使能端 sbit wei1=P2^3;//定义数码管的位选使能端 sbit key2=P2^1; //夜间模式按键 sbit key3=P2^0; sbit key4=P3^2; sbit key5=P3^3; sbit A_red=P1^0;//将A组二极管与端口绑定 sbit A_yellow=P1^1; sbit A_green_left=P1^2; sbit A_green_straight=P1^3; sbit B_red=P1^4 ;//将B组二极管与端口绑定 sbit B_yellow=P1^5; sbit B_green_left=P1^6; sbit B_green_straight=P1^7; int left_time= 5;//设置灯的时间 单位1s int straight_time= 5; int yellow_time= 5; int red_time,green_time ; int type =1; int i; int count=0; int number=0; //倒计时时间 uchar t=0; uchar time,wei; //定义东西数码管 //共阳数码管 0-9 uchar table[]={0xc0,0xf9,0xa4,0xb0,0x99,0x92,0x82,0xf8,0x80,0x90,0xff}; void init() //初始化函数 { TMOD=0x01; //定时器在方式1下工作 TH0=(65536-46080)/256; //定时器0高8位赋初值 50ms 再装一次初值 TL0=(65536-46080)%256; //定时器0低8位赋初值 EA=1; ET0=1; //定时器0/计数器0 中断允许 EX0=1; //外部中断请求0 EX1=1; //外部中断请求1 IT0=1; //外部中断0采用边沿触发方式 IT1=1; //外部中断1采用边沿触发方式 PX0=0; //外部中断0低优先级 PX1=1; //外部中断1高优先级 TR0=1; //定时器开始工作 } void delay(uchar t) {//延时函数，t=1时延时1ms uchar i, j; for (i = 0; i < t; i++) for (j = 0; j < 125; j++); } void display(uchar time){//数码管显示(只显示东西向的倒计时) wei1=0;wei0=1; P0=table[time/10]; delay(2); //延时 P0=0xff; //消除残影 delay(4); wei0=0;wei1=1; P0=table[time%10]; delay(2); P0=0xff; delay(4); } void night(){//夜间模式 key4进key2出 delay(10); while(1){ P1=0x00; delay(1000); A_yellow=!A_yellow; B_yellow=!B_yellow; delay(1000); if(key2==0) break; } } void emergency(){//紧急模式 key5进key2出 delay(10); while(1){ P1=0x11; if(key2==0) break; } } void set_straight(){//设置直行绿灯时间 key2进key2出 while(1){ display(straight_time); if(key3==0) { delay(10); while(key3==0); //每按一次key3直行绿灯时间加1s； straight_time++; display(straight_time); delay(10); } if(key2==0){delay(10);break;} } } void set_left(){//设置左转绿灯时间 key3进key3出 while(1){ display(left_time); if(key2==0){ delay(10); while(key2==0) ; left_time++; display(left_time); delay(10); } if(key3==0){delay(10);break;} } } void main(){ red_time=straight_time+left_time+yellow_time ; init(); while(1) { P1=0x00;//初态全灭 while(key2==0){delay(10);set_straight();break; } while(key3==0){delay(10);set_left();break; } switch(type){ case 1: //东西向直行绿灯亮，南北向红灯亮 A_green_straight=1; B_red=1; display(straight_time+left_time-number); if(count!=straight_time) break; count=0; number=0;type=2; break; case 2://东西向直行绿灯灭、左转绿灯亮，南北向红仍灯亮 A_green_straight=0; A_green_left=1; B_red=1; display(left_time-number); if(count!=left_time) break; count=0; number=0;type=3; break; case 3://东西向黄灯闪烁，南北向红仍灯亮 B_red=1; A_green_left=0; delay(500); A_yellow=!A_yellow; delay(500); if(count!=yellow_time) break; count=0;number=0; type=4; break; case 4://南北向直行绿灯亮，东西向红灯亮 B_red=0;B_green_straight=1; A_red=1; A_yellow=0; display(red_time-number); if(count!=straight_time) break; count=0; number=0;type=5; break; case 5://南北向直行绿灯灭、左转绿灯亮，东西向红灯仍亮 B_green_straight=0; B_green_left=1; A_red=1; display(left_time+yellow_time-number); if(count!=left_time) break; count=0;number=0; type=6; break; case 6://南北向黄灯闪烁、东西向红灯仍亮 A_red=1; for(i=0;i<15;i++){ display(yellow_time-number); } B_green_left=0; delay(500); B_yellow=!B_yellow; delay(500); if(count!=yellow_time) break; P1=0x00;count=0;number=0; type=1; break; } } } void time0() interrupt 1//定时器0 { EA=0; t++; if(t==20){ number++; //用于倒计时 count++; //用于控制交通灯 t=0; } TH0=(65536-46080)/256; //定时器0高8位赋初值 50ms 再装一次初值 TL0=(65536-46080)%256; //定时器0低8位赋初值 EA=1; } void night0() interrupt 0//夜间模式（外部中断0） { night(); } void emergency1() interrupt 2//紧急模式（外部中断1） { emergency(); } |