[ ホームページ ] [ 携帯用URL ]
質問掲示板 「喫茶イヌでも」
イヌでもわかるJavaScript講座
質問掲示板 「喫茶 イヌでも」

[ EZBBS.NET | 新規作成 | ランキング | オプション ]
iモード&(絵文字)、au対応!ケータイからも返信できる無料掲示板!
名前
 E-mail 
題名
内容
投稿KEY    改行有効 等幅フォント
URL



1416.onloadが複数ある場合について 返信  引用 
名前:ネット・サーファー    日付:2016/01/02(土) 16:56
はじめまして。

javascriptで簡易おみくじを作りましたが、"文字の切り替え"と"
文字の点滅"の部分の速度が不規則です。
原因は、複数のonloadと,及び"大吉〜小凶"と点滅部分の"運"のIDが
同じだからと思いますが、それならばどのように書き換えればいいのか
分かりません。ご教示いただけませんか。


(ソースコード)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<TITLE>おみくじ</TITLE>


<SCRIPT type="text/javascript">
<!--

var txt1="<span>&#x301C 今年は</span><span>"</span><span id='blink_1' style='color:deeppink; font-size:26px; font-weight:bold;'>大吉</span><span>"</span><span'>ですよ</span><span>♪♪♪ </span><span>&#x301C</span>";
var txt2="<span>&#x301C 今年は</span><span>"</span><span id='blink_1' style='color:deeppink; font-size:26px; font-weight:bold;'>中吉</span><span>"</span><span>ですよ</span><span>♪♪ </span><span>&#x301C</span>";
var txt3="<span>&#x301C 今年は</span><span>"</span><span id='blink_1' style='color:deeppink; font-size:26px; font-weight:bold;'>小吉</span><span>"</span><span>ですよ</span><span>♪ </span><span>&#x301C</span>";
var txt4="<span>&#x301C 今年は</span><span>"</span><span id='blink_1' style='color:chocolate; font-size:26px; font-weight:bold;'>大凶</span><span>"</span><span>ですよ</span><span>!!! </span><span>&#x301C</span>";
var txt5="<span>&#x301C 今年は</span><span>"</span><span id='blink_1' style='color:chocolate; font-size:26px; font-weight:bold;'>中凶</span><span>"</span><span>ですよ</span><span>!! </span><span>&#x301C</span>";
var txt6="<span>&#x301C 今年は</span><span>"</span><span id='blink_1' style='color:chocolate; font-size:26px; font-weight:bold;'>小凶</span><span>"</span><span>ですよ</span><span>! </span><span>&#x301C</span>";

function omikuji() {
document.getElementById("good_or_bad").innerHTML=txt;
rand = Math.floor(Math.random()*6);
if (rand == 0) document.getElementById("good_or_bad").innerHTML=txt1; blink1();
if (rand == 1) document.getElementById("good_or_bad").innerHTML=txt2; blink1();
if (rand == 2) document.getElementById("good_or_bad").innerHTML=txt3; blink1();
if (rand == 3) document.getElementById("good_or_bad").innerHTML=txt4; blink1();
if (rand == 4) document.getElementById("good_or_bad").innerHTML=txt5; blink1();
if (rand == 5) document.getElementById("good_or_bad").innerHTML=txt6; blink1();
}

var txt="<p id='good_or_bad'><span>&#x301C </span><span id='output'></span><span > が出るか…それは</span><span style='color:gold; font-size:26px; font-weight:bold;'>"</span><span id='blink_1' style='color:gold; font-size:26px; font-weight:bold;'> 運 </span><span style='color:gold; font-size:26px; font-weight:bold;'>"</span></span><span>次第です</span><span > &#x301C</span></p>";

function reset(){
document.getElementById("good_or_bad").innerHTML=txt;
wordChange();
blink1();
}

// -->
</SCRIPT>

<script type="text/javascript">
<!--

onload=function(){
blink1();
wordChange();
}

var n = 0;
function wordChange()
  {
var iv = 3000;
var words = [ '鬼', '福' ,'蛇' ,'仏' ];
var color = ["chocolate", "deeppink", "chocolate","deeppink"];
document.getElementById('output').innerHTML = words[n];
document.getElementById('output').style.color = color[n];
document.getElementById('output').style.fontSize =fontSize="26px";
document.getElementById('output').style.fontWeight ="bold";
n++;
if (n > words.length - 1) n = 0;
setTimeout(wordChange, iv);
  }

var iv = 1000;
function blink1()
{
if (document.all("blink_1").style.visibility == "visible")
{
document.all.blink_1.style.visibility = "hidden";
}
else
{
document.all.blink_1.style.visibility = "visible";
}
setTimeout("blink1()", iv);
}
//-->
</script>

</head>


<BODY bgcolor="black" text="white" onload="wordChange();blink1();">

<script type="text/javascript">
<!--
document.write("<p id='good_or_bad'>");
document.write("<span>&#x301C </span>");
document.write("<span id='output'></span>");
document.write("<span> が出るか…それは</span>");
document.write("<span style='color:gold; font-size:26px; font-weight:bold;'>"</span>");
document.write("<span id='blink_1' style='color:gold; font-size:26px; font-weight:bold;'> 運 </span>");
document.write("<span style='color:gold; font-size:26px; font-weight:bold;'>"</span>");
document.write("<span>次第です&#x301C</span>");
document.write("</p>");
//-->
</script>
<br>
<input type="button" id="omikujiButton" value="おみくじ" onClick="omikuji();">
<br>
<input type="button" value="リセット" onClick="reset();">


 </BODY>
</HTML>



1418.Re: onloadが複数ある場合について
名前:nanashi    日付:2016/01/12(火) 06:56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<TITLE>おみくじ</TITLE>

//文字の大きさと太さはスタイルシートで指定。何度も書かずに済みます。
<style type="text/css">
#blink_1{font-size:26px; font-weight:bold;}

#output{font-size:26px; font-weight:bold;}
</style>

<SCRIPT type="text/javascript">
<!--



1420.Re: onloadが複数ある場合について
名前:nanashi    日付:2016/01/18(月) 06:26
上手く投稿されなかったみたいで1418の続きを投稿してみます。

#output{font-size:26px; font-weight:bold;}
</style>

<SCRIPT type="text/javascript">
<!--

  var omikujiWords = ["大吉", "中吉", "小吉", "大凶", "中凶", "小凶"];
  var omikujiMarks = ["♪♪♪", "♪♪", "♪", "!!!", "!!", "!"];

  var ret;  //setTimeoutの戻り値を格納するための変数。

function omikuji(){


  clearTimeout(ret);  //setTimeout('wordChange();', 3000)を停止させます。


1421.Re: onloadが複数ある場合について
名前:nanashi    日付:2016/01/18(月) 06:30
長い投稿は無理なのかな?1420の続き
  clearTimeout(ret);  //setTimeout('wordChange();', 3000)を停止させます。

  rand = Math.floor(Math.random()*6);

  var color = (rand < 3) ? "deeppink": "chocolate";
  var resultTxt = "〜 今年は<span id='blink_1' style='color:" + color + ";'>" + omikujiWords[rand] + "</span>ですよ" + omikujiMarks[rand] + "〜";


  //alert(resultTxt);  //alertの前の//を外して保存実行すると<p>タグに挿入される文字列が確認できます。

  document.getElementById('good_or_bad').innerHTML = resultTxt;


1422.Re: onloadが複数ある場合について
名前:nanashi    日付:2016/01/18(月) 06:34
続き
  //alert(resultTxt);  //alertの前の//を外して保存実行すると<p>タグに挿入される文字列が確認できます。

  document.getElementById('good_or_bad').innerHTML = resultTxt;
}

function reset(){

  clearTimeout(ret);  //リセットボタンが連続で押されてもwordChange();の複数並行に実行されるのを防ぐためここでもsetTimeoutを停止。保険みたいなものです。

  //<p id='good_or_bad'>に挿入される初期値の文字列
  document.getElementById("good_or_bad").innerHTML= "〜 <span id='output'></span>が出るか…それは<span id='blink_1' style='color:gold;'> 運 </span>次第です〜";

1419.非同期処理という訳ではないが、functionの処理を途中で止めて、再開したい 返信  引用 
名前:新人SE    日付:2016/01/14(木) 18:02
はじめまして

現在作成しているホームページで、子画面をwindow.openして、子画面からの値を戻り値として親に返す、というjsを作成を依頼されました。
正直、ジェネレータとも目指す挙動が違いますし、検討すらついていない状態なので、こういった構文が使えるかも、といったヒントで構いませんので、ご教授ください。
以下、挙動です。

親.html
<script>
var hoge=foo();//ここのhogeに子画面からの返し値を返したい
</script>
<BUTTON onclick="hoge()">子画面呼出</BUTTON>

親.js
var foo=function(){

win.open

return hogehoge;//ここに子画面からの値が入っててほしい
}

子.js
<BUTTON>YES</BUTTON>
<BUTTON>NO</BUTTON>

ただ一言、無理と言っていただくだけでも参考になりますので、よろしくお願いします。

1417.追記 返信  引用 
名前:ネット・サーファー    日付:2016/01/02(土) 20:41
下記の質問のソースコードは,IE以外のブラウザでは、うまく動作するか
分かりません。また、保存する場合は、"unicode"形式にしてください。

1413.WINSCPをWSHシェルで起動しファイルサイズ取得する方法について 返信  引用 
名前:リュウ    日付:2015/11/02(月) 17:22
初めまして。リュウといいます。
初心者のような質問ではないですがもし、実際にやったことがある方が
おられたら教えていただきたいです。
以下のようにソースを記述し実行したところ、アウトプットストリームに
ファイルのサイズの情報が出てきません。
コマンドを「ls」で指定したとき、カレントのファイル群のファイルサイズ
らしきものが、アウトプットされました。
ただ、以下のようにファイルを指定してアウトプットしてもファイルサイズが
出てこないので困っています。
環境はWindows8でサーバがCentOS6。WinSCPは一つバージョンは古いものです。
ちょっと玄人的な質問ですみませんが、もし、お分かりになる方や
下記の方法以外でもファイルサイズが取得できる方法がありましたら
ぜひ教えていただきたいです。
WinSCPのサイトでコマンドを調べてもファイルサイズ取得のコマンドが
無かった為、アウトプットしたもので取り出して処理をしようと思っています。
すみませんが、よろしくお願いします。

var oExec = WshShell.Exec("C:\\Program Files (x86)\\WinSCP\\WinSCP.com");


oExec.StdIn.Write("open admin@192.168.10.30\n");
oExec.StdIn.Write("password\n");
oExec.StdIn.Write("option transfer binary\\n");
oExec.StdIn.Write("option confirm off\\n");
oExec.StdIn.Write("ls /home/appuser/XXXX-0.7.4.tar.gz\n");
oExec.StdIn.Write("listend\n");
var string = null;

// 終了文字列送信

oExec.StdIn.Write("listend\n");



1414.Re: WINSCPをWSHシェルで起動しファイルサイズ取得する方法について
名前:リュウ    日付:2015/11/02(月) 17:25
すみません、途中で途切れましたので続きを載せます。

while (!oExec.StdOut.AtEndOfStream) {
var res = oExec.StdOut.ReadLine();

string = string + ',' + res;


1415.Re: WINSCPをWSHシェルで起動しファイルサイズ取得する方法について
名前:リュウ    日付:2015/11/02(月) 17:27
すみません、また、途切れましたので記載します。

document.getElementById('answer').innerHTML = string; //<ここで吐き出しています。
// リストの最後
if(res.match(/listend$/)){
break;
}
}

1412.画像1をクリック、別ページで画像1を表示。画像2をクリック、別ページで画像2を表示するには? 返信  引用 
名前:ごっつい初心者です    日付:2015/10/08(木) 21:51
パスワード管理されたページの
画像1をクリックすると、
別ページに画像1を表示して、

同じく、画像2をクリックすると
別ページに画像2を表示したいのですが
どのようにすればいいでしょうか?

お教えくださいませ。

1411.インクルードさせずにjsを対応させるには・・・ 返信  引用 
名前:まいご    日付:2015/09/30(水) 20:10
初心者ですみません。
現状
<script type="text/javascript">
$(document).ready(function($) {
$('#target').load('header_template.html');
});
</script>
で呼び出すことでjsが動いています。

これを呼び出しではなく直接htmlに記述してjsファイルを動かすにはどうしたらよいのでしょうか?
全くわからず本当に申し訳ございませんが、ご教授いただけないでしょうか?
大変困っております、よろしくお願いいたします。


■jsファイルは以下になります。


$(function(){
'use strict';

// big menu is locimg variable
var host = location.href.match(/^http[s]*:\/\/[a-zA-Z0-9.\-]+\//)[0];
var headtmp = host + "header_template.html";

var header = $('#header');


window.ebisHref = function() {
var element = document.getElementById(linkId);
location.href = element.href;
}

window.addEbisTracker = function(obj, argument, pageID, target) {
var imgObj = new Image();
imgObj.src = "https://ac.ebis.ne.jp/log.php?argument=" + argument + "&ebisPageID=" + pageID;
if (target == 1) {
return true;
}
imgObj.onload = function () {
$("body").append(imgObj)
setTimeout(function() {
$(imgObj).remove();
});
};
setTimeout(function() {
$("body").append(imgObj)
setTimeout(function() {
$(imgObj).remove();
});
}, 2000);
return false;
};

$('img').each(function(){
if($(this).attr('src') && $(this).attr('src').match('_off')){
var img = $(this);
// if off, set hover event
img.hover(function(){
if($(this).attr('src').match('_off')){
$(this).attr("src", $(this).attr("src").replace("_off.", "_on."));
}},function(){
if($(this).attr('src').match('_on')){
jQuery(this).attr("src", jQuery(this).attr("src").replace("_on.", "_off."));
}
});
}
});

$.get(headtmp,function(response){
header.html(response);

var $submenu = $("#header .head-submenu");
var $addon = $("#headmenu-left .addon");

$addon.click(function() {
var self = this;
var index = 0;
$.each($addon, function(i, v) {
if (v == self) {
index = i;
return false;
}
});
$("#header-overlay").fadeIn().one("click", function() {
$(this).fadeOut();
$submenu.hide();
});
$submenu.hide().eq(index).show();
return false;
});

if (location.pathname == '/info/lifestyle.html') {
$submenu.filter('.lifestyle').on('click', 'a', function() {
if ($(this).attr('href').indexOf('#') != -1) {
$('#header-overlay').fadeOut();
$submenu.hide();
}
});

}
$('#headmenu-onlinestore a').click(function() {
var view = '/online/top';
if (window.ga) {
window.ga("send", "pageview", view);
} else if (window.pageTracker) {
window.pageTracker._trackPageview(view);
}
// online add
addEbisTracker(this, "rWfpzngp", "17", "self")
});
});

if ($("#footer").length){
var foottmp = host + "footer_template.html";
var footer = $('#footer');
if (navigator.userAgent.match(/iPad|iPhone/)) {
footer.css({ position: 'relative' });
}
$.get(foottmp,function(response){
footer.html(response);
});
}


$(window).load(function() {
if ($("#header-overlay").length > 0) {
//$("body").append($("#header-overlay").clone());
} else {
$("body").append('<div id="header-overlay"></div>');
}
});


$('.colside-tab').click(function() {
var self = $(this).parent(),
kids = location.pathname.indexOf('diesel-kids') == -1 ? false : true;

if ($(self).hasClass('open')) {
$(self).removeClass('open').css({width: 36});
$('.colsidemenu, .colsidemenu-m-f-wrap', self).hide();
} else {
if (kids) {
$(self).addClass('open').css({width: 220});
} else {
$(self).addClass('open').css({width: 404});
}
$('.colsidemenu, .colsidemenu-m-f-wrap', self).show();
}
return false;
});



// buy button tracking
if ($.fn.on) {
$(document).on("click", ".buy-button,buy", function() {
// online add
addEbisTracker(this, "rWfpzngp", "15", "self")
});

$('#collection-stage').on('click', '.social-button', function(){
var device = $(this).data('device');
var product = $('.product-image img').data('src').split('/')[6].split('.')[0];
if (window.ga && $(this).data('social') == 'facebook') {
ga('send', 'event', 'facebook_' + product, 'click', device);
} else if(window.ga && $(this).data('social') == 'twitter') {
ga('send', 'event', 'twitter_' + product, 'click', device);
}
});
}


});

1409.Step.103 をもっと大きく・・・ 返信  引用 
名前:たむかめ    日付:2015/09/13(日) 00:00
Step.103 の内容についてですが、
バックグラウンド(body)に表示する際はどうすればいいですか



1410.Re: Step.103 をもっと大きく・・・
名前:ななし    日付:2015/09/13(日) 23:25
単純にdivタブのwidthとheightを100%、imgタブのwidthを100%にして表示してみてはどうですか?
bodyタブのbackground-imageに二つの画像を重ねてフェードイン・フェードアウトする方法がわからないので。

1406.Step30電卓で 返信  引用 
名前:ebifurai55    日付:2015/09/04(金) 00:05
外部JSファイルにjavascirptこーどを書いたのですが反応しません。どうやったら外部jsファイルで書くことができますか?



1407.Re: Step30電卓で
名前:ebifurai55    日付:2015/09/04(金) 03:03
Step30の電卓が動きません。サンプルページに行くと機能するのに、自作HTMLだと動作しません。valueの値がUncaught TypeError: Cannot set property 'value' of undefinedと言われます。


1408.Re: Step30電卓で
名前:ebifurai55    日付:2015/09/05(土) 18:59
自己解決しました。どうやら変数名で被ってたようです。お騒がせしました。

1405.(untitled) 返信  引用 
名前:big guy    日付:2015/08/14(金) 00:13
思った以上詳しく説明していて本当にわかりやすいです。
ありがとうございます。

1402.自作報告画面にリンクを付けたい 返信  引用 
名前:tamkame    日付:2015/08/03(月) 17:01
Step.102の自作警告画面の表示にリンクを付けたいです!


ページ: 1 2 3 4 5 6 7 8 9 10 >> >| 

無料アクセス解析

アクセス解析の決定版!無料レンタルで最大100ページ解析!

   投稿KEY
   パスワード

EZBBS.NET produced by InsideWeb