HTML CSS and JAVASCRIPT

Question

我正在做一项任务，我需要根据温度将顶部出现的云更改为冷冻脸表情符号或太阳。我已经设置了Java，所以当提示弹出时，城市和温度会根据用户的反应而变化。

1. 如何将现有表情符号更改为新表情符号？

2. 新的h1显示提示的条目，但它们没有间隔。如何在单词之间创建间距？

   天气应用程序h1，h2，h3{文本对齐：居中；字体家族：Helvetica，Arial，sans-serif；}

   h1 {
   color: #1a64d6;
   font-size: 34px;
   line-height: 48px;
   margin: 0;
   }
   h2 {
   margin: 0;
   font-size: 34px;
   line-height: 48px;
   font-weight: 400;
   }
   ul {
   padding: 0;
   }
   li {
   list-style: none;
   text-align: center;
   padding: 10px 0;
   border-radius: 10px;
   transition: all 200ms ease-in-out;
   max-width: 400px;
   margin: 0 auto;
   }
   li:hover {
   background: #fffbef;
   }
   p {
   font-size: 18px;
   opacity: 0.7;
   text-align: center;
   font-family: monospace;
   }
   button {
   display: block;
   margin: 20px auto;
   border: 1px solid #1a64d6;
   background: #1a64d6;
   color: #fff;
   font-size: 16px;
   line-height: 22px;
   padding: 16px 24px;
   border-radius: 30px;
   transition: all 200ms ease;
   box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0;
   cursor: pointer;
   }
   button:hover {
   background: white;
   color: #1a64d6;
   border: 1px solid #1a64d6;
   }
   </style>
   

   🌤
   目前在东京21°

   13°/23°

   • 🌧明天

     10°/22°

   • 🌥星期六

     15°/17°

   • ☀️星期日

     25°/28°

   <button>Change city</button>
   <p>Coded by Matt Delac</p>
   <script>
   function city() {
   let cityName = prompt("What city do you live in?");
   let temp = prompt("What temperature is it?");
   let heading = document.querySelector("h1");
   if (temp <= 0) {
   heading.innerHTML = "Currently" + temp + "in" + cityName;
   } else {
   heading.innerHTML = "Currently" + temp + "in" + cityName;
   }
   }
   let changeCityButton = document.querySelector("button");
   changeCityButton.addEventListener("click", city);
   </script>
   

Answer 1

问题1的解决方案

要更改表情符号，只需更改img标签上的alt和src属性。

这是代码

function city() {
let cityName = prompt("What city do you live in?");
let temp = prompt("What temperature is it?");
let heading = document.querySelector("h1");
let img = document.querySelector('img');
if (temp <= 0) {
heading.innerHTML = "Currently " + temp + "in" + cityName;
img.setAttribute('alt', 'freezing emoji');
img.setAttribute('src', 'path/to.emoji');
} else {
heading.innerHTML = "Currently" + temp + "in" + cityName;
img.setAttribute('alt', 'not freezing emoji');
img.setAttribute('src', 'path/to.emoji');
}
}
let changeCityButton = document.querySelector("button");
changeCityButton.addEventListener("click", city);

问题2的解决方案

添加间距所需要做的就是在字符串的末尾添加空格。

JS看起来像这个

function city() {
let cityName = prompt("What city do you live in?");
let temp = prompt("What temperature is it?");
let heading = document.querySelector("h1");
let img = document.querySelector('img');
if (temp <= 0) {
heading.innerHTML = "Currently " + temp + " in " + cityName;
img.setAttribute('alt', 'freezing emoji');
img.setAttribute('src', 'path/to.emoji');
} else {
heading.innerHTML = "Currently " + temp + " in " + cityName;
img.setAttribute('alt', 'not freezing emoji');
img.setAttribute('src', 'path/to.emoji');
}
}
let changeCityButton = document.querySelector("button");
changeCityButton.addEventListener("click", city);

这是代码笔的链接。