実行したいこと
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}
回答2件
あなたの回答
tips
プレビュー