一些有用的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;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>
