3Dデジタルコンテンツ制作 slow-alpha.com

Category - JavaScript

ラコ

JavaScript　マウスクリックで画像表示順を入替え

ラコ　2009-02-13　coment(0)　trackback(0)　2009:02:13:15:20:59

マウスクリックで画像の表示順を切換え。

z-Indexプロパティを変更している。

→サンプル

 

■スクリプト

<html>
<head>
<title>JavaScript　マウスクリックで画像表示順を入替え</title>
<style type="text/css">
<!--
#p01 {position:absolute;top:50px;left:150px;z-index:2;}
#p02 {position:absolute;top:150px;left:50px;z-index:1;}
#p03 {position:absolute;top:200px;left:250px;z-index:0;}
-->
</style>
<script language="javascript">
<!--
var z = 3;
function changez(Name){
 Name.style.zIndex = z++;
}
-->
</script>
</head>
<body>
<p>画像をクリックしてください。</p>
<img src="img/img01.jpg" id="p01" onMousedown="javascript:changez(this)">
<img src="img/img02.jpg" id="p02" onMousedown="javascript:changez(this)">
<img src="img/img03.jpg" id="p03" onMousedown="javascript:changez(this)">
</body>
</html>

ラコ

JavaScript　プルダウンメニュー

ラコ　2009-02-13　coment(0)　trackback(0)　2009:02:13:14:01:01

短章JavaScriptによるプルダウンメニュー。

サンプル

 

■スクリプト

<form>
 <select onChange="location.href=value;">
  <option value="#">移動先を選択してください。</option>
  <option value="http://www.yahoo.co.jp/">Yahoo! JAPAN</option>
  <option value="http://www.google.co.jp/">Google</option>
  <option value="http://www.youtube.com/">YouTube</option>
 </select>
</form>

ラコ

JavaScript　タブ切換えUI　Yetii

ラコ　2009-02-09　coment(0)　trackback(0)　2009:02:09:17:34:58

簡単にタブ切換えUIを実装できる｢Yetii｣

Yetii - Yet (E)Another Tab Interface Implementation

→サンプル

 

■スクリプト

<html>
<head>
<title>JavaScript　タブ切換えUI　Yetii</title>
<script type="text/javascript" src="js/yetii.js"></script>
<style>
* {margin: 0; padding: 0}
#tab-container-1 {width: 500px; margin: 20px;}
#tab-container-1-nav {float: left; width: 500px;margin-bottom: 10px;}
#tab-container-1-nav ul li {margin: 0;padding: 0;list-style: none;}
#tab-container-1-nav li {float: left;list-style: none;margin-right:10px;background color:#cccccc;}
</style>
</head>
<body>

<div id="tab-container-1">

 

    <ul id="tab-container-1-nav">
    <li><a href="#tab1" class="tab1">tab 1</a></li>
    <li><a href="#tab2">tab 2</a></li>
    <li><a href="#tab3">tab 3</a></li>
    </ul>

 

    <div class="tab" id="tab1">
    <h2>tab 1</h2>
    <p>Lorem Ipsum is simply dummy text
    of the printing and typesetting industry.</p>
    </div>
   
    <div class="tab" id="tab2">
    <h2>tab 2</h2>
    <p>It was popularised in the 1960s with
    the release of Letraset sheets.</p>
    </div>

 

    <div class="tab" id="tab3">
    <h2>tab 3</h2>
    <p>Lorem Ipsum is simply dummy text
    of the printing and typesetting industry.</p>
    </div>

 
</div>

 

<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tab-container-1'
});
</script>

 

</body>
</html>

ラコ

JavaScript　数値計算

ラコ　2009-02-09　coment(0)　trackback(0)　2009:02:09:11:39:22

JavaScriptで数値計算。

ラジオボタンで計算方法を切換え。

→サンプル

 

■スクリプト

<html>
<head>
<title>JavaScript　数値計算</title>
<script language="javascript">
<!--
function keisan()
{
 n1 = document.keisanForm.number1.value;
 n2 = document.keisanForm.number2.value;
 n1 = eval(n1);
 n2 = eval(n2);
 if(document.keisanForm.keisanType[0].checked == true) n = n1 + n2;
 if(document.keisanForm.keisanType[1].checked == true) n = n1 - n2;
 if(document.keisanForm.keisanType[2].checked == true) n = n1 * n2;
 if(document.keisanForm.keisanType[3].checked == true) n = n1 / n2;
 document.keisanForm.result.value = n;
}
-->
</script>
</head>
<body>
<form name="keisanForm">
数値1：<input type="text" name="number1" value="6"><br />
数値2：<input type="text" name="number2" value="3"><br />
結果：<input type="text" name="result"><br />
<input type="radio" name="keisanType" value="0" checked>足し算<br />
<input type="radio" name="keisanType" value="1">引き算<br />
<input type="radio" name="keisanType" value="2">掛け算<br />
<input type="radio" name="keisanType" value="3">割り算<br />
<input type="button" value="計算する" onClick="keisan()">
</form>
</body>
</html>

ラコ

JavaScript 　現在時刻

ラコ　2009-02-09　coment(0)　trackback(0)　2009:02:09:09:41:25

JavaScriptで現在時刻を表示。

→サンプル

 

■スクリプト

<html>
<head>
<title>JavaScript　現在時刻</title>
<script language="javascript">
<!--
function clockTime()
{
dateObj = new Date();
h = dateObj.getHours();
m = dateObj.getMinutes();
s = dateObj.getSeconds();
document.clockForm.clock.value = h + ":" + m + ":" + s;
setTimeout("clockTime()",1000)
}
-->
</script>
</head>
<body onLoad="setTimeout('clockTime()',1000)";>
<form name="clockForm">
現在時刻：<input type="text" name="clock">
</form>
</body>
</html>

1  2
  • STG PROJECT 本格始動
  • RPG PROJECT

RSS