<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JavaScript Demo</title>
<style type="text/css">
.container {
display: flex;
flex-direction: column;
margin-top: 1rem;
margin-left: 1rem;
}
.row {
display: flex;
margin-top: 1rem;
}
.row input:nth-child(1n + 2) {
margin-left: 1rem;
}
</style>
<script src="./vendors/jquery/1.11.2/jquery.min.js"></script>
<script lanuage="JavaScript">
var timer;
$(function() {
$("#t1").bind("click", function() {
var tnow = new Date().Format("yyyy-MM-dd hh:mm:ss");
$("#s").html(tnow);
});
$("#t2").bind("click", function() {
$("#s").html(random(1, 100));
});
$("#t3").bind("click", function() {
timer = setInterval(function() {
var tnow = new Date().Format("yyyy-MM-dd hh:mm:ss");
$("#s").html(tnow);
}, 1000);
});
$("#t4").bind("click", function() {
clearInterval(timer);
});
$("#t9").bind("click", function() {
var url =
"http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
doGet(
url,
function(res) {
var result = "<ul>";
for (r in res.result) {
console.log(res.result[r]);
result += "<li>" + res.result[r].title + "</li>";
}
result += "</ul>";
$("#s").html(result);
},
doError
);
});
//设置焦点
$("#iv").focus();
$("#iv").keydown(function(event) {
if (event.which == 13) {
var sv = $("#iv").val();
$("#s").html(sv);
$("#iv").val("");
}
});
});
function doGet(url, success, error) {
$.ajax({
type: "get",
url: url,
dataType: "json",
success: function(res) {
success(res);
},
error: function(res) {
error(res);
}
});
}
function doSuccess(res) {
console.log(res);
}
function doError(res) {
console.log(res);
}
//功能函数 获取随机数
function random(lower, upper) {
return Math.floor(Math.random() * (upper - lower + 1) + lower);
}
//扩展data
Date.prototype.Format = function(fmt) {
var o = {
"M+": this.getMonth() + 1, // 月份
"d+": this.getDate(), // 日
"h+": this.getHours(), // 小时
"m+": this.getMinutes(), // 分
"s+": this.getSeconds(), // 秒
"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
S: this.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt;
};
</script>
</head>
<body>
<div class="container">
<div class="row">
<input type="button" id="t1" value="获取日期" />
<input type="button" id="t2" value="生成随机数" />
<input type="button" id="t3" value="开始任务" />
<input type="button" id="t4" value="停止任务" />
<input type="button" id="t9" value="获取数据" />
</div>
<div class="row">回车显示: <input type="text" id="iv" /></div>
<div class="row" id="s"></div>
</div>
</body>
</html>
网友评论