js学習マニュアル--Window対象

8391 ワード

フレーム Date 機能 input ブトンナンバーズ

1.1表示ダイアログ

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("       ！")
}
</script>
</head>
<body>

<input type="button" onclick="disp_alert()" value="     " />

</body>
</html>

2.1折り返し行があるダイアログを表示する

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("     。     " + "
" + "           。")
}
</script>
</head>
<body>

<input type="button" onclick="disp_alert()" value="     " />

</body>
</html>

3.1確認ボックスを表示するconfirm

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
  {
  alert("You pressed OK!");
  }
else
  {
  alert("You pressed Cancel!");
  }
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Show a confirm box" />

</body>
</html>

4.1提示枠promptを表示する
<>function disp_prompt() { var name=prompt(「お名前を入力してください」、「Bill Gates」) if(name!=null&name!=") { document.write(「こんにちは」＋name+「!今日はよく過ごしましたか?」) } }
5.1ボタンをクリックしてウィンドウを開く

<html>
<head>
<script type="text/javascript">
function open_win() 
{
window.open("http://www.w3school.com.cn")
}
</script>
</head>

<body>
<form>
<input type=button value="    " onclick="open_win()">
</form>
</body>

</html>

6.1新しいウィンドウを開き、外観を制御する

<html>
<head>
<script type="text/javascript">
function open_win()
{
window.open("http://www.w3school.com.cn","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
}
</script>
</head>

<body>
<form>
<input type="button" value="    " onclick="open_win()">
</form>
</body>

</html>

7.1一回クリックして複数のウィンドウを開く

<html>
<head>
<script type="text/javascript">
function open_win() 
{
window.open("http://www.microsoft.com/")
window.open("http://www.w3school.com.cn/")
}
</script>
</head>

<body>
<form>
<input type=button value="    " onclick="open_win()">
</form>
</body>

</html>

8.1ユーザーを新しい住所に連れて行く

<html>
<head>
<script type="text/javascript">
function currLocation()
{
alert(window.location)
}
function newLocation()
{
window.location="/index.html"
}
</script>
</head>

<body>
<input type="button" onclick="currLocation()" value="      URL">
<input type="button" onclick="newLocation()" value="   URL">
</body>

</html>

9.1ドキュメントを再読み込みする

<html>
<head>
<script type="text/javascript">
function reloadPage()
{
window.location.reload();
}
</script>
</head>
<body>

<input type="button" value="      " onclick="reloadPage()" />

</body>
</html>

10.1ウィンドウのステータスバーにテキストを設定する

<html>
<body>

<script type="text/javascript">
window.status="Some text in the status bar!!"
</script>

<p>         。</p>

</body>
</html>

11.1ページを印刷する

<html>
<head>
<script type="text/javascript">
function printpage()
  {
  window.print()
  }
</script>
</head>
<body>

<input type="button" value="    " onclick="printpage()" />

</body>
</html>

12.1フレームから飛び出す

<html>
<head>
<script type="text/javascript">
function breakout()
  {
  if (window.top!=window.self) 
    {
    window.top.location="/example/hdom/tryjs_breakout.htm"
    }
  }
</script>
</head>
<body>

<input type="button" onclick="breakout()" value="    ！">

</body>
</html>

13.1シンプルなタイミング set Timeout

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>

<body>
<form>
<input type="button" value="        ！" onClick = "timedMsg()">
</form>
<p>       。5           。</p>
</body>

</html>

14.1別の単純な時間計算

<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000)
}
</script>
</head>

<body>
<form>
<input type="button" value="       ！" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>       。             2、4、6   。</p>
</body>

</html>

15.1無限ループ中の時間計測

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>

<body>
<form>
<input type="button" value="    ！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>        。      0         。</p>
</body>

</html>

16.1無限ループの中のタイミング-停止ボタンが付いている

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

function stopCount()
{
clearTimeout(t)
}
</script>
</head>

<body>
<form>
<input type="button" value="    ！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="    ！" onClick="stopCount()">
</form>

<p>
      “    ”  。      0         。  “    ”     。
</p>

</body>

</html>

17.1クロック

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

18.1 pop-upを作成する

<html>
<head>
<script type="text/javascript">
function show_popup()
{
var p=window.createPopup()
var pbody=p.document.body
pbody.style.backgroundColor="red"
pbody.style.border="solid black 1px"
pbody.innerHTML="     pop-up！  pop-up     ，     ！"
p.show(150,150,200,50,document.body)
}
</script>
</head>

<body>
<button onclick="show_popup()">   pop-up！</button>
</body>

</html>

最短経路JS版