質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

799閲覧

HTML 背景を画像にし、javascriptと連動して画像が変わるようにしたい

gakuseikun

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/01/16 06:09

実行したいこと

HTMLで背景を画像にしたいです。
現在、ボタンを押すと100円ずつたまっていき、20回に1回300円貯金されるところまでできています。ここから、2000円貯金されるごとに背景の画像が変わるシステムを作成したいです。2000円、4000円、6000円と超えるごとに背景が変わるようにしたいです。
アドバイスをいただきたいです。

javascript

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/style.css"> 6 <title>クリックアプリ</title> 7</head> 8<body> 9 10 <p>家事をして<br><span style="background: linear-gradient(transparent 50%, tomato 70%);"id="Output">0</span><br>貯金しました</p> 11 12 <img class="js-image-insertarea" src=""> 13 14 <input class="js-trigger-button" type="button" value="貯金する"> 15 16 <p id="temporaryBox" style="display: none;"> 17 おめでとうございます! 18 貯金をこれから増やしてちょんまげ<br /> 19 </p> 20 21 <script type="text/javascript"> 22 function getRandomInt(max) { 23 return Math.floor(Math.random() * Math.floor(max)); 24 } 25 26 ( function() { 27 var Count = 0; 28 if(isNaN(localStorage.getItem('kingaku'))){ 29 var count = localStorage.getItem('kingaku'); 30 count = isNaN(count) ? 0 : number(count); 31 } 32 else{ 33 Count = parseInt(localStorage.getItem('kingaku'),10); 34 //localStorageから読んだ値を文字列→整数変換 35 } 36 37 var outputElement = document.getElementById("Output") 38 outputElement.textContent = Count; 39 //起動時のCount値の表示 40 41 var imageElement = document.querySelector('.js-image-insertarea') 42 43 function CountUp() { 44 if(getRandomInt(100) < 11) { 45 Count += 200; 46 } 47 Count += 100; 48 localStorage.setItem('kingaku',Count); 49 //現在のカウント値をlocalStorageに保存する(文字列で保存される) 50 outputElement.textContent = Count; 51 } 52 53 function getImage() { 54 var image = new Array("./image1.png","./image2.png","./image3.png"); 55 var randomNum = (Math.floor(Math.random() * 3) ); 56 57 imageElement.src = image[ randomNum ] 58 } 59 60 function onClickTriggerButton() { 61 CountUp(); getImage(); 62 } 63 64 var timerId; 65 //ボックスを表示して、タイめーを開始 66 function showBox() { 67 document.getElementById("temporaryBox").style.display = "block"; //ボックスを表示 68 } 69 70 //ボックスを消して、タイめーを終了 71 function closeBox() { 72 document.getElementById("temporaryBox").style.display = "none"; 73 clearTimeout(timerId); 74 document.getElementById("btnShowBox").disabled = false; 75 document.getElementById("btnKeepBox").disabled = false; 76 } 77 78 document.querySelector('.js-trigger-button').addEventListener('click', onClickTriggerButton) 79 })() 80 </script> 81</body> 82</html>

CSS

1html{ 2 background-color: #99FFFF; 3} 4body { 5 background-color: #99FFFF; 6 margin: px; 7 padding: 30px; 8 font-size: 35px; 9 line-height: 2; 10 color: #000000; 11} 12.Output{ 13 background: linear-gradient(transparent 70%, tomato 70%); 14} 15input { 16 background-color: #FFFF00; 17 font-size: 40px; 18 text-align: center; 19 color: #000000; 20 position: fixed; 21 left: 50px; 22 bottom: 150px; 23} 24 img{ 25 background-color: #99FFFF; 26 position: absolute; 27 left: 70px; 28 top: 350px; 29}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaputaros

2020/01/16 06:18

どこまでできて、どこがうまくいかないのか、明記したほうがいいかと。 ソースコードを全部読め!と丸投げしてもアドバイスしづらいです。
gakuseikun

2020/01/16 06:46

おっしゃるとおりです。 申し訳ありません。 ・ボタンを押して100円ずつ増やすと同時に3枚の画像をランダムで表示させる ・15~20回の割合で300円増える ところまでできています。 ・貯金額が2000円を超えろごとに、画像を変更して表示させる ところができません。 初期画面では画像を背景にしていません。 わかりにくい部分が多々あると思います。 誠に申し訳ございません。
kaputaros

2020/01/20 00:40

|ノд゚) ここに書かず、本文に追記しておけばいいですよ。
guest

回答2

0

背景を数パターンcssでクラスに設定しておして
しきい値を超えるときにクラスを付け替えてやればよいでしょう

投稿2020/01/16 06:30

編集2020/01/16 06:30
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gakuseikun

2020/01/16 06:46

ありがとうございます。 やってみます。
guest

0

ベストアンサー

質問の回答になっているかわからず恐縮ですが、

一旦簡易的に書いてしまいますと、背景画像ではないですが、こんな感じで背景色は変わります。

function CountUp() { if(getRandomInt(100) < 11) { Count += 200; } Count += 100; localStorage.setItem('kingaku',Count); //現在のカウント値をlocalStorageに保存する(文字列で保存される) outputElement.textContent = Count; if(Count > 2000){ outputElement.style.backgroundColor = 'red'; } if(Count > 4000){ outputElement.style.backgroundColor = 'yellow'; } }

投稿2020/01/16 06:47

kiddayo

総合スコア240

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gakuseikun

2020/01/17 01:47

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問