ping 체크하는 웹페이지를 만들고 있는데요...
아래 사진과 같이 표시 되게 하는것은 구했는데요...
보기 편하게 편집을 하려고 합니다.
아래사진과 같이 편집을 하려고 합니다...
봐도 전혀 내용을 모르겠습니다..
도움부탁드립니다.
제일 첫번째 사진 내용입니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<style type="text/css">
A:link {text-decoration:none; color:#000080}
A:visited {text-decoration:none; color:#000080}
A:active {text-decoration:none; color:#000080}
A:hover {text-decoration:none; color:#000080}
.OK {
color:blue;
}
.checking,.unchecked {
color:#FF8C00;
}
.Fail {
color:red;
}
</style>
<title>CCTV Ping Check</title>
<script type='text/javascript'>
window.onload=function(){
function ping(ip, callback) {
if (!this.inUse) {
this.status = 'unchecked';
this.inUse = true;
this.callback = callback;
this.ip = ip;
var _that = this;
this.img = new Image();
this.img.onload = function () {
_that.inUse = false;
_that.callback('responded');
};
this.img.onerror = function (e) {
if (_that.inUse) {
_that.inUse = false;
_that.callback('OK', e);
}
};
this.start = new Date().getTime();
this.img.src = "http://" + ip;
this.timer = setTimeout(function () {
if (_that.inUse) {
_that.inUse = false;
_that.callback('Fail');
}
}, 1500);
}
}
var PingModel = function (servers) {
var self = this;
var myServers = [];
ko.utils.arrayForEach(servers, function (location) {
myServers.push({
name: location,
status: ko.observable('unchecked')
});
});
self.servers = ko.observableArray(myServers);
ko.utils.arrayForEach(self.servers(), function (s) {
s.status('checking');
new ping(s.name, function (status, e) {
s.status(status);
});
});
};
var komodel = new PingModel([
'10.18.12.2',
'10.18.14.10',
'10.18.30.18',
'10.18.30.26',
'10.18.30.28',
'10.18.30.30',
'10.18.30.31'
]);
ko.applyBindings(komodel);
}
</script>
</head>
<body>
<ul data-bind="foreach:servers">
<li> <a href="#" data-bind="text:name,attr:{href: 'http://'+name}">tester</a> <span data-bind="text:status,css:status"></span>
</li>
</ul>
</body>
</html>
글쓰기