第3弾、HTMLを動的に書き換えるのも慣れてきて、
Ajaxもわかってきたので、時刻をAjaxで取得する時計を作ってみた。
以下コードです。
サーバ側です。
Ajaxrq-py-time.cgi
#!/usr/bin/python
# -*- coding: utf-8 -*-
from os import environ
from datetime import datetime
import cgi
json1 = '''Content-Type: application/json; charset=utf-8
{
'''
json2 = '"time": ' + "\""+ datetime.now().strftime("%Y/%m/%d %H:%M:%S") + "\"\n"
json2 += "}"
print json1+json2
|
クライアント側です。
Ajaxrq-loop.html
<HTML>
<HEAD>
<script type="text/javascript">
var xmlHttp;
function getAjax(){
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = update;
xmlHttp.open("POST", "http://192.168.11.14/cgi-bin/Ajaxrq-py-time.cgi", true);
xmlHttp.send(null);
}
function update(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var obj = JSON.parse(xmlHttp.responseText);
document.getElementById("time").innerText= obj.time;
if(sw=="ON"){
getAjax();
}
}
}
let sw="OFF";
function onoff(){
let i=true;
if(sw=="OFF"){
sw="ON";
document.getElementById("onoff").innerText="OFF";
i=false;
}
else{
if(i){
sw="OFF";
document.getElementById("onoff").innerText="ON";
}
}
if(sw=="ON"){
getAjax()
}
}
</script>
</HEAD>
<BODY>
<div style="text-align:center;">
<label id="time" style="font-size:40px;">TIME</label><br />
<button type="button" id="onoff" onClick="onoff()" style="font-size:40px;">
ON
</button>
</div>
<BODY>
</HTML>
|
動作確認
アクセスしてみます。
ONボタンを押すとOFFボタンに書き換わり、時間が進みます。
OFFボタンを押すと止まります。
ご参考まで。
ONボタンを押すとOFFボタンに書き換わり、時間が進みます。
OFFボタンを押すと止まります。
ご参考まで。
前回 HTML5とJavascriptとファイルビュアーを作ってみた。 で ローカル上にあるファイルの表示をしてみました。 今回はそのファイルをサーバーにアップロードして、アップロード先のURLを返してもらう ファイルアップローダーを作ってみようと思います。 ...
SVGで印鑑ポイ画像ツール を公開してから一か月ぐらいたってしましました。 本体はこちら Seal editer made with SVG です。 そろそろ何を作ったのか解説したいところです。 それでは本編です。
0 件のコメント:
コメントを投稿