JavaScriptでサイコロのようなものを作成しています。
スタートボタンで"数字の画像"(diceX.gif)が順に入れ替わって、ストップボタンで止まる、というものなのですが、
この画像数字の入れ替わる範囲を"1-2の間で、1-3の間で・・・"というように変化させたく思っています。
現状は下記のように別々に並べて画像、スタート.ストップが表示されるよういなっていまが、
これをセレクトメニューで「2」を選択した場合は1-2の、「3」を選択した場合には1-3..の間での変化と
1つの画像、ボタン表示で済むようにしたいのですが、どのように記述すればよいのでしょうか?
こういったものを作成するのは初めてで、様々なサイトを参考になんとかここまでこぎ着けましたがどうにも行き詰まってしまいました
なにとぞ宜しくお願いいたします。
<SCRIPT LANGUAGE="JavaScript">
<!--
var myImage1 = new Image(); myImage1.src = "dice1.gif";
var myImage2 = new Image(); myImage2.src = "dice2.gif";
var myImage3 = new Image(); myImage3.src = "dice3.gif";
・
・
・
var img =0;
fileName = new Array("dice1.gif","dice2.gif","dice3.gif",・・・);
function rotate2() {
img = Math.floor(Math.random()*2);
document.images["dice2"].src = fileName[img];
timer = setTimeout("rotate2()",30);
}
function stop2() {
clearTimeout(timer);
}
function rotate3() {
img = Math.floor(Math.random()*3);
document.images["dice3"].src = fileName[img];
timer = setTimeout("rotate3()",30);
}
function stop3() {
clearTimeout(timer);
}
・
・
・
</SCRIPT>
<BODY>
<IMG src="dice2.gif" name="dice2">
<FORM action="javascript://">
<INPUT TYPE="submit" VALUE="start" onClick="rotate2()">
<INPUT TYPE="submit" VALUE="stop" onClick="stop2()">
</FORM>
<IMG src="dice3.gif" name="dice3">
<FORM action="javascript://">
<INPUT TYPE="submit" VALUE="start" onClick="rotate3()">
<INPUT TYPE="submit" VALUE="stop" onClick="stop3()">
</FORM>
・
・
・
No.9ベストアンサー
- 回答日時:
#4様のように、楽しい動きはしませんが、ご質問にかなり近いもののつもり。
speedの数値を変えれば、速度が変わります。(例では 100msec)
<div id="diece">の中の<img>群が切り替え表示の対象です。
(画像は#2様のご指摘のように、1枚の画像で行った方が良いように思いますが、ご質問文はそれぞれになっているのでとりあえずそのまま。)
<html>
<head>
<style type="text/css">
.sel {float:left; padding-right:2em; }
#dice { float:left; color:red; text-align: center;}
#dice img { margin:0 auto 1em; }
</style>
<script type="text/javascript">
window.onload = function() { rotation.init(); }
var rotation = {
max:1, tmax:1, nmbr:0, flag:false, img:[], speed:100,
init:function(){
this.img = document.getElementById('dice').getElementsByTagName('IMG');
this.max = this.img.length; this.tmax = this.max;
for (var i=0; i<this.max; i++){
this.img[i].style.display = (i==this.nmbr)?'block':'none';
}
},
start:function(f) {
if (!this.flag) {
var n = f.form.elements['type'].value;
if (n) {
n = parseInt(n); if (n>this.max) n = this.max;
this.tmax = n; this.flag = true; this.disp();
} else { this.flag = false; }
}
},
stop:function() { this.flag = false; },
disp:function() {
var n = this.nmbr;
while (n == this.nmbr) n = Math.floor(Math.random()*this.tmax);
this.img[this.nmbr].style.display = 'none';
this.img[n].style.display = 'block';
this.nmbr = n;
if (this.flag) setTimeout("rotation.disp()", this.speed);
}
}
</script>
</head>
<body>
<form>
<div class="sel">
<select name="type" id="type">
<option value="">選択してください
<option value="2">2面サイコロ
<option value="3">3面サイコロ
<option value="4">4面サイコロ
<option value="5">5面サイコロ
<option value="6">6面サイコロ
</select>
</div>
<div id="dice">
<img src="dice1.gif">
<img src="dice2.gif">
<img src="dice3.gif">
<img src="dice4.gif">
<img src="dice5.gif">
<img src="dice6.gif">
<input type="button" value=" start " onclick="rotation.start(this);">
<input type="button" value=" stop " onclick="rotation.stop();">
</div>
</form>
</body>
</html>
No.8
- 回答日時:
yyr446さん!ごしてき、ありがとうございま~す!^^;
げんいんは、しょうすうをきりすてにするために |0 を
つかってましたが、ちゃんと()でくくってないためでした。
ちゃんとparseIntつかえばいいものを・・・・。と、ひとりつっこみ。
Slot.prototype.start = (function ( sin ) {
return function ( m ) {
if( !m ) this.eflag = 0;
var c, x0, x1, s;
for( c = 0; c < this.n; c++) {
x0 = this.r * sin( this.k[c] );
x1 = this.r * sin( this.k[c] + this.t) + 1;
s = this.img[c].style;
if( x0 < x1 ) {
s.left = ((this.r + x0)|0) + 'px';
s.width= Math.abs((x1-x0)|0) + 'px';
s.zIndex = 1 + '';
} else {
s.left = ((this.r + x1)|0) + 'px';
s.width= Math.abs((x0-x1)|0) + 'px';
s.zIndex = 0 + '';
}
this.k[c] += this.step;
}
if( this.eflag == 1) {
this.step-=.2;
if( this.step < 0) {
this.eflag = 2;
this.step = this.bstep;
}
}
if( this.eflag == 2) return;
setTimeout( (function (that) { return function () { that.start(1); }; })( this ), this.interval );
};
})( Math2.sin );
No.6
- 回答日時:
当事者でないので、原因究明と修正を頼むわけでもありませんが
気づいたもので...
babu_babooさんのサンプルIEだとかっこいいですが、
Firefox(3.5)だとぶさいくです。
なぜか、Firefoxだと
this.img[c].style.leftの値がうまく設定されてないようで、
画像は変わりますが、左端で伸び縮みしているだけです。
IEだと真ん中でぐるぐる回っているような視覚効果が出てます。
No.5
- 回答日時:
>・ドラム回転のためにいわゆる目押しが出来てしまう
スピードをはやくすれば?
>・回転している間に他の数字が見えてしまう
みえるはんいを、小さくすれば?
>・数字画像が定位置で止まらない
いまは、なおすこんじょうがないよ
じぶんのべんきょうのためにかいたものだし
きたいされても・・・・・。
まるなげなんだし、きぼうのかいとうがつくまで、
まってみたら?あちこちできいてるみたいだし。
No.4
- 回答日時:
♪さいころのようでさいころでない。
べんべん。♪すろっとのようですろっとでない。べんべん。
こうはんはつかれて、いつものように、ぐだぐだになってしまいました。^^;
ぜんかくくうはくは、はんかくになおしてちょ!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Images</title>
<style type="text/css">
#waku0 { overflow:auto; width:600px; height:90px; border:1px red solid;}
#waku0 img { border:0px none; width:120px; height:90px; }
</style>
<div id="waku0">
<img src="./img/0.gif" alt="Image0">
<img src="./img/1.gif" alt="Image1">
<img src="./img/2.gif" alt="Image2">
<img src="./img/3.gif" alt="Image3">
<img src="./img/4.gif" alt="Image4">
<img src="./img/5.gif" alt="Image5">
<img src="./img/6.gif" alt="Image6">
<img src="./img/7.gif" alt="Image7">
<img src="./img/8.gif" alt="Image8">
<img src="./img/9.gif" alt="Image9">
</div>
<p>
<select id="a" onchange="if(p.eflag==2) { p = new Slot('waku0', 5, 30, +this.value); }">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="button" value="start" onclick="if(p.eflag == 2)p.start()"> /
<input type="button" value="stop" onclick="p.stop()">
</p>
<script type="text/javascript">
var Math2 = new function ( ) {
var sinTable = [ ];
var cosTable = [ ];
var i, t;
for( i = 0; i < 720; i++ ) {
t = i * Math.PI / 180;
sinTable[ i ] = Math.sin( t );
cosTable[ i ] = Math.cos( t );
}
this.sin = function ( deg ) {
return sinTable[ (360 + deg % 360) |0 ];
};
this.cos = function ( deg ) {
return cosTable[ (360 + deg % 360) |0 ];
};
};
var Slot = function ( ) {
this.init.apply( this, arguments );
};
Slot.prototype.init = function ( pid, step, interval, face ) {
if( !( this.e = document.getElementById( pid ) ) ) return null;
var c, o;
this.e.style.overflow = 'hidden';
this.e.style.position = 'relative';
this.img = this.e.getElementsByTagName( 'IMG' );
this.r = this.e.offsetWidth / 2;
this.n = face || this.img.length;
this.t = 360 / this.n;
this.k = [ ];
this.step = step;
this.bstep = step;
this.interval = interval;
this.eflag = 2;
for( c = 0; o = this.img[ c ]; c++) {
this.k[c] = this.t * c;
o.style.position = 'absolute';
o.style.visibility = c < this.n ? 'visible': 'hidden';
}
this.start(1);
return true;
};
Slot.prototype.start = (function ( sin ) {
return function ( m ) {
if( !m ) this.eflag = 0;
var c, x0, x1, s;
for( c = 0; c < this.n; c++) {
x0 = this.r * sin( this.k[c] );
x1 = this.r * sin( this.k[c] + this.t) + 1;
s = this.img[c].style;
if( x0 < x1 ) {
s.left = (this.r + x0)|0 + 'px';
s.width= Math.abs((x1-x0)|0) + 'px';
s.zIndex = 1 + '';
} else {
s.left = (this.r + x1)|0 + 'px';
s.width= Math.abs((x0-x1)|0) + 'px';
s.zIndex = 0 + '';
}
this.k[c] += this.step;
}
if( this.eflag == 1) {
this.step-=.2;
if( this.step < 0) {
this.eflag = 2;
this.step = this.bstep;
}
}
if( this.eflag == 2) return;
setTimeout( (function (that) { return function () { that.start(1); }; })( this ), this.interval );
};
})( Math2.sin );
Slot.prototype.stop = (function ( ) {
return function ( ) {
this.eflag = 1;
};
})();
var p = new Slot('waku0', 5, 20,+document.getElementById('a').value)
</script>
この回答への補足
早速のご返答ありがとうございます
試用してみましたが、非常におもしろい動きで見た目にも楽しめるものでした。
セレクトメニューによる切り替えも正に求めている動作でした
しかしながら、
・ドラム回転のためにいわゆる目押しが出来てしまう
・回転している間に他の数字が見えてしまう
・数字画像が定位置で止まらない
という点においては求めるものではありませんでした
折角、ご回答下さったにも関わらず私の説明不足もあり、申し訳ありません
もしできましたら、お手すきの際にでも元の挙動のままでセレクトメニューに
対応させて頂くことは出来ませんでしょうか?
今回、お書き頂いたものは大切に保存させて頂き、また機会があれば
使わせて頂こうと思います。
No.3
- 回答日時:
【補記】selectのvalueは文字だから
var n=Math.floor(Math.random()*parseInt(parm));
でした。(掛け算で勝手に変換されてるかも)
No.2
- 回答日時:
style clipは問題ありそうです。
よく条件を吟味してませんが、ヒントとしては、
縦横100px×100pxの画像10枚を縦につなげて
1000px×100pの1枚の画像all.gifにしておいて、
<div>と<img>を組み合わせて
<div id="all_gazou" style="width:100px; height: 100px;overflow:hidden;z-index:99;">
<img src="all.gif" />
</div>
と表示させておいて。
画像表示位置をn(0-9)の値によって
document.getElementById("all_gazou").childNodes[0].style.top = (n * -100) + "px";
とする。
nは、parmによって
function hoge(parm){
var n=Math.floor(Math.random()*parm);
document.getElementById("all_gazou").childNodes[0].style.top = (n * -100) + "px";
}
parmは選択させて
<select onchange="javascript:hoge(this.value);">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
-------
</select>
ですかねえ
fujillin様も仰られていることから"画像を1枚にすること"は有用なことなのだとは思いますが、今の私ではその有用性を理解することが出来ません。
fujillin様のものにyyr446様のご回答を併せて勉強し、今後なんとか自力で
画像一枚で処理できるようにしてみたいと思います
この度はありがとうございました。
No.1
- 回答日時:
セレクトメニューとボタンについてはおいといて、
1つの画像で実現する方法ですが、
複数の画像を縦又は横に連結して1枚の画像としておいて、
その画像を表示する時のstyle属性ののclipを使って表示したい部分だけ
切り取って表示してしまうのはいかがでしょう。
<img src="all.gif" id="all_gazou" >
val='rect(上端,右端,下端,左端)'
document.getElementById("all_gazou").style.position = 'absolute';
document.getElementById("all_gazou").style.clip=val;
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- PHP imageフォルダに、画像をリサイズして保存する時のファイル名を変更したい 1 2023/05/30 11:39
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像マウスオーバーで、checkb...
-
jQueryで同じクラス名のものを...
-
jQueryで表示している所をsubm...
-
JavaScriptでの画像切り替えを...
-
Javascript初心者|jQueryの.va...
-
JavaScriptでサイコロのような...
-
MAX関数を使ってからLEFT JOIN...
-
Vb.net2005での画像の合成方法
-
c++std::string型をTCHARに変換...
-
HTMLからimgのsrcのみを正規表...
-
IplImageのBmp変換。
-
<div ~ </div> で囲まれたテキ...
-
IFRAMEの表示/非表示を切り替え...
-
jqueryのsortableで一部ソート...
-
動的にHTMLコンテンツを吹き出...
-
変数名をどのようにつけるのが...
-
jQueryでシンプルドラッグドロ...
-
プルダウンの位置がwin/macでず...
-
クリックで色変更後に既に変更...
-
JSPでの画像ファイル表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像マウスオーバーで、checkb...
-
アップロードファイルの種類に...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
サムネイルにカーソルを合わせ...
-
時間差で画像を動作させたいjav...
-
マウスオーバーにて画像に虫眼...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
クリックでクリッカブルマップ...
-
JQueryでオープニングアニメー...
-
交互に入れ替わる画像を複数配置
-
JavaScript/CANVASでの画像読込...
-
VBAでIEを動かす場合、下記の①...
おすすめ情報