标签：error: component method als time() lda log image absolute
1.垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body { height: 100%; height:100%; margin: 0; padding: 0; } /*最通俗的做法 .content { width: 300px; height: 300px; background: blue; margin: 0 auto; position: relative; top: 50%; margin-top: -150px; div上移自身高度(300)的一半 }*/ /*利用CSS3的transform .content { width: 300px; height: 300px; background: blue; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); div向上平移（translate）自身高度的一半(50%) }*/ /*flex布局 body { display: flex; align-items: center; justify-content: center; } .content { width: 300px; height: 300px; background: blue; }*/ </style> </head> <body> <div class="content"></div> </body> </html>
2.遍历JSON
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>遍历json</title> </head> <body> <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> <script> var json= { "Type": "Coding", "Height":100 }; for (var key in json){ //遍历json console.log(key); //key console.log(json[key]); //value } $.each(json, function(i) {//与上面等效 console.log(i); //key console.log(json[i]); //value }); </script> </body> </html>
3.时间戳
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>时间戳</title> </head> <body> <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> <script> var timestamp=Math.round(new Date().getTime()/1000); console.log(timestamp); var unixTimestamp = new Date(timestamp * 1000); console.log(unixTimestamp); var commonTime = unixTimestamp.toLocaleString(); console.log(commonTime); </script> </body> </html>
4.react获取天气API
<!DOCTYPE html> <html> <head> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="browser.min.js"></script> <script src="jquery.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var RepoList = React.createClass({ getInitialState: function() { return { loading: true, error: null, data: null, URL:null, }; }, componentDidMount() { this.props.promise.then( value => this.setState({loading: false, data: value}), error => this.setState({loading: false, error: error})); }, render: function() { if (this.state.loading) { return <span>Loading...</span>; } else if (this.state.error !== null) { return <span>Error: {this.state.error.message}</span>; } else { var allData = this.state.data; var deepData = allData.data; var deepList = deepData.list; var repoList = deepList.map(function (repo, index) { return ( <li key={index}>{repo.date}<br/> 白天：{repo.qw1}°C {repo.tq1}<br/> 夜间：{repo.qw2}°C {repo.tq2}<br/> </li> ); }); return ( <main> <h1>访问的剩余次数:{allData.counts}</h1> <h2>城市为{deepData.cityName} 数据更新时间：{deepData.sj}</h2> <h1>这几天的天气：</h1> <ol>{repoList}</ol> </main> ); } } }); ReactDOM.render( <RepoList promise={$.getJSON(‘http://api.yytianqi.com/forecast7d?city=CH280101&key=tuusv17ftmfe7nqu‘)} />, document.getElementById(‘example‘) ); </script> </body> </html>
5.获取浏览器宽高
<!DOCTYPE html> <html lang="zh"> <head> <title>获取浏览器宽高</title> <meta charset="UTF-8"> </head> <body> <h2 align="center">请调整浏览器窗口大小</h2> <hr/> <form action="#" method="get" name="form1" id="form1"> 浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"/><br/> 浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"/><br/> </form> <script> var winWidth,winHeight; function findDimensions(){ //函数：获取尺寸 //获取窗口宽度 if (window.innerWidth){ winWidth = window.innerWidth; } else if ((document.body) && (document.body.clientWidth)){ winWidth = document.body.clientWidth; } //获取窗口高度 if (window.innerHeight){ winHeight = window.innerHeight; } else if ((document.body) && (document.body.clientHeight)){ winHeight = document.body.clientHeight; } //通过深入Document内部对body进行检测，获取窗口大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){ winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //结果输出至两个文本框 document.form1.availHeight.value= winHeight; document.form1.availWidth.value= winWidth; } findDimensions(); //调用函数，获取数值 window.onresize=findDimensions; </script> </body> </html>
6.图片方格拼图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>方格拼图</title> <style> div{ background-image:url("1.jpg"); background-repeat:no-repeat; } </style> </head> <body> <script> for(var i = 0;i<10;i++){ for(var j=0;j<10;j++){ var divs = document.createElement("div"); divs.style.cssText = "width:60px;height:60px;background-color:black;position:absolute;border:1px solid #fff;"; document.body.appendChild(divs); divs.style.left = j*60+"px"; divs.style.top = i*60+"px"; divs.style.backgroundPositionX = -j*60+"px"; divs.style.backgroundPositionY = -i*60+"px"; divs.style.opacity = "0"; divs.onmouseover = function(){ this.style.opacity = "1"; } } } </script> </body> </html>
标签：error: component method als time() lda log image absolute
原文地址：http://www.cnblogs.com/shen076/p/6537211.html
