レス数:1 / 状態:未解決 / No:16 / ATOM
1
名前:ネット･サーファー
日付:2015/04/24(金)21:00:02
ID:iY/YhxERzzBL
下記のソースは、所謂"マウスストーカー(デジタル時計)"に、"背景色ボタン"と
"on/offボタン"をリンクさせたものですが、"on/offボタン"を『clock on』⇔
『clock off』と切り替えて表示するように したいと思って試行錯誤しております。
どこを、どのように書き換えればよいか，ご教示いただけませんでしょうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<TITLE>デジタル時計 - JavaScript</TITLE>
<style type="text/css">
<!--
.css{
font-size:16px;
font-weight:bold;
}
//-->
</style>
<script type="text/javascript">
<!--
function setTimeColors(color){
if(moji){
for(var i=0;i<moji.length;i++){
var elem=document.getElementById("Time"+i);
if(elem)elem.style.color=color;
}
}
}
function color1(){
document.bgColor = "black";
document.fgColor = "gold";
setTimeColors("gold");
}
function color2(){
document.bgColor = "red";
document.fgColor = "white";
setTimeColors("white");
}
function color3(){
document.bgColor = "white";
document.fgColor = "blue";
setTimeColors("blue");
}
// -->
</script>
<script type="text/javascript"><!--
msec=100; //追従速度
fx=20; //表示位置ｘ座標
fy=-10; //表示位置y座標
fs=6; //文字の大きさ
fc="blue"; //文字色
F_face="Times New Roman";//フォント
//--------------------------------------
now=new Date();
(now.getHours()<10)?H="0"+now.getHours():H=now.getHours();
(now.getMinutes()<10)?M="0"+now.getMinutes():M=now.getMinutes();
(now.getSeconds()<10)?S="0"+now.getSeconds():S=now.getSeconds();
moji=H+":"+M+":"+S;
x=new Array();y=new Array();cnt = 0;
for (i=0; i<=moji.length; i++) {x[i] = -10;y[i] = -10; }
for(i=0;i<moji.length;i++){
document.write(
"<DIV style='position:absolute;z_index:2;top:-10px;left:-10px;' ID='Fonts"+i+"'>"
+"<font face='"+F_face+"' size="+fs+" color="+fc+" ID='Time"+i+"'>"
+moji.charAt(i)+"</font></DIV>");
}
function F_move(NNevent){
if(document.all){
x[0]=event.x;y[0]=event.y;
}else{
x[0]= NNevent.pageX;y[0]= NNevent.pageY;
}
}
function F_run(){
for (i=moji.length-1; i>=0; i--){
if(i){x[i] = x[i-1]+fs*3;y[i] = y[i-1];}
if(document.all){
document.all("Fonts"+i).style.pixelTop=y[i]+fy+document.body.scrollTop;
document.all("Fonts"+i).style.pixelLeft=x[i]+fx+document.body.scrollLeft;
}else{
document.getElementById("Fonts"+i).style.top=y[i]+fy+"px";
document.getElementById("Fonts"+i).style.left=x[i]+fx+"px";
}
}
}
setInterval('F_run()',msec);
document.onmousemove = F_move;
function nowtime(){
now=new Date();
(now.getHours()<10)?H="0"+now.getHours():H=now.getHours();
(now.getMinutes()<10)?M="0"+now.getMinutes():M=now.getMinutes();
(now.getSeconds()<10)?S="0"+now.getSeconds():S=now.getSeconds();
moji=H+":"+M+":"+S;
for(i=0;i<moji.length;i++){
document.getElementById("Time"+i).innerHTML=moji.charAt(i);
}
}
setInterval("nowtime()",1000);
var isClockOn=true;
function toggleClock(){
isClockOn=!isClockOn;
var displayValue=isClockOn?"block":"none";
for(var i=0;i<moji.length;i++)
document.getElementById("Fonts"+i).style.display=displayValue;
}
// -->
</script>
</HEAD>
<BODY>
<Font size="5"><b>デジタル時計</b></font>
<center><p>
<INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey
1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: black"
onclick="color1();document.getElementById('text').style.color='lightblue';document.getElementById('text1').style.color='purple';document.getElementById('text2').style.color='lightblue';document.getElementById('text3').style.color='purple'"
type="button" value="
">
<INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey
1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: red"
onclick="color2();document.getElementById('text').style.color='green';document.getElementById('text1').style.color='blue';document.getElementById('text2').style.color='green';document.getElementById('text3').style.color='blue'"
type="button" value="
">
<INPUT style="BORDER-RIGHT: black 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey
1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: white"
onclick="color3();document.getElementById('text').style.color='purple';document.getElementById('text1').style.color='gold';document.getElementById('text2').style.color='purple';document.getElementById('text3').style.color='gold'"
type="button" value="
">
</p></center>
<br><br><br><br>
<marquee class="css"><span id="text" style="font-size:30; color:green;">clock off/onボタン</span>の表示を、<span id="text1" style="font-size:30; color:green;">"clock off"⇔"clock on"</span>と切り替えるようにするには？
</marquee>
<br><br><br><br><br><br>
<center><p>
<input type="button" value="clock off/on" onClick="toggleClock();">
</p></center>
</BODY>
</HTML>
"on/offボタン"をリンクさせたものですが、"on/offボタン"を『clock on』⇔
『clock off』と切り替えて表示するように したいと思って試行錯誤しております。
どこを、どのように書き換えればよいか，ご教示いただけませんでしょうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<TITLE>デジタル時計 - JavaScript</TITLE>
<style type="text/css">
<!--
.css{
font-size:16px;
font-weight:bold;
}
//-->
</style>
<script type="text/javascript">
<!--
function setTimeColors(color){
if(moji){
for(var i=0;i<moji.length;i++){
var elem=document.getElementById("Time"+i);
if(elem)elem.style.color=color;
}
}
}
function color1(){
document.bgColor = "black";
document.fgColor = "gold";
setTimeColors("gold");
}
function color2(){
document.bgColor = "red";
document.fgColor = "white";
setTimeColors("white");
}
function color3(){
document.bgColor = "white";
document.fgColor = "blue";
setTimeColors("blue");
}
// -->
</script>
<script type="text/javascript"><!--
msec=100; //追従速度
fx=20; //表示位置ｘ座標
fy=-10; //表示位置y座標
fs=6; //文字の大きさ
fc="blue"; //文字色
F_face="Times New Roman";//フォント
//--------------------------------------
now=new Date();
(now.getHours()<10)?H="0"+now.getHours():H=now.getHours();
(now.getMinutes()<10)?M="0"+now.getMinutes():M=now.getMinutes();
(now.getSeconds()<10)?S="0"+now.getSeconds():S=now.getSeconds();
moji=H+":"+M+":"+S;
x=new Array();y=new Array();cnt = 0;
for (i=0; i<=moji.length; i++) {x[i] = -10;y[i] = -10; }
for(i=0;i<moji.length;i++){
document.write(
"<DIV style='position:absolute;z_index:2;top:-10px;left:-10px;' ID='Fonts"+i+"'>"
+"<font face='"+F_face+"' size="+fs+" color="+fc+" ID='Time"+i+"'>"
+moji.charAt(i)+"</font></DIV>");
}
function F_move(NNevent){
if(document.all){
x[0]=event.x;y[0]=event.y;
}else{
x[0]= NNevent.pageX;y[0]= NNevent.pageY;
}
}
function F_run(){
for (i=moji.length-1; i>=0; i--){
if(i){x[i] = x[i-1]+fs*3;y[i] = y[i-1];}
if(document.all){
document.all("Fonts"+i).style.pixelTop=y[i]+fy+document.body.scrollTop;
document.all("Fonts"+i).style.pixelLeft=x[i]+fx+document.body.scrollLeft;
}else{
document.getElementById("Fonts"+i).style.top=y[i]+fy+"px";
document.getElementById("Fonts"+i).style.left=x[i]+fx+"px";
}
}
}
setInterval('F_run()',msec);
document.onmousemove = F_move;
function nowtime(){
now=new Date();
(now.getHours()<10)?H="0"+now.getHours():H=now.getHours();
(now.getMinutes()<10)?M="0"+now.getMinutes():M=now.getMinutes();
(now.getSeconds()<10)?S="0"+now.getSeconds():S=now.getSeconds();
moji=H+":"+M+":"+S;
for(i=0;i<moji.length;i++){
document.getElementById("Time"+i).innerHTML=moji.charAt(i);
}
}
setInterval("nowtime()",1000);
var isClockOn=true;
function toggleClock(){
isClockOn=!isClockOn;
var displayValue=isClockOn?"block":"none";
for(var i=0;i<moji.length;i++)
document.getElementById("Fonts"+i).style.display=displayValue;
}
// -->
</script>
</HEAD>
<BODY>
<Font size="5"><b>デジタル時計</b></font>
<center><p>
<INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey
1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: black"
onclick="color1();document.getElementById('text').style.color='lightblue';document.getElementById('text1').style.color='purple';document.getElementById('text2').style.color='lightblue';document.getElementById('text3').style.color='purple'"
type="button" value="
">
<INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey
1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: red"
onclick="color2();document.getElementById('text').style.color='green';document.getElementById('text1').style.color='blue';document.getElementById('text2').style.color='green';document.getElementById('text3').style.color='blue'"
type="button" value="
">
<INPUT style="BORDER-RIGHT: black 1px solid; BORDER-TOP:
grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey
1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
FONT-FAMILY: ms gothic; BACKGROUND-COLOR: white"
onclick="color3();document.getElementById('text').style.color='purple';document.getElementById('text1').style.color='gold';document.getElementById('text2').style.color='purple';document.getElementById('text3').style.color='gold'"
type="button" value="
">
</p></center>
<br><br><br><br>
<marquee class="css"><span id="text" style="font-size:30; color:green;">clock off/onボタン</span>の表示を、<span id="text1" style="font-size:30; color:green;">"clock off"⇔"clock on"</span>と切り替えるようにするには？
</marquee>
<br><br><br><br><br><br>
<center><p>
<input type="button" value="clock off/on" onClick="toggleClock();">
</p></center>
</BODY>
</HTML>
このスレッドについて
| 質問の状態 : | 未解決 |
| 投稿開始日 : | 2015/04/24(金)21:00:02 |
| 投稿終了日 : | 2015/05/01(金)21:00:04 |
| 投稿者 : | ネット･サーファー |
| レス総数 : | 1 |
| スレッド番号 : | 16 |