时间转换器网页设计 [英] Time converter web page design

查看：22
本文介绍了时间转换器网页设计的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

let convertBtnEl = document.getElementById("convertBtn");convertBtn.addEventListener("点击", function() {var hours = parseInt(document.getElementById('hoursInput').value);var 分钟 = parseInt(document.getElementById('minutesInput').value);var 秒 = (小时 * 60 + 分钟) * 60;控制台日志(小时)；var showSeconds = document.getElementById("timeInSeconds");var showError = document.getElementById("errorMsg");如果(isNaN(小时)|| isNaN(分钟)){showError.textContent += "错误！！！请输入任意值";} 别的 {showSeconds.textContent = "秒数" + seconds;}});

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700&1,7family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,701,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");身体 {最大宽度:100vw；高度:100vh；边距:0；填充:0；显示:弹性；对齐内容:居中；对齐项目:居中；背景:url(https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png) center/cover no-repeat 固定；}.converter-wrapper {显示:弹性；弹性方向:列；对齐项目:居中；}.input-wrappers {宽度:100%；显示:弹性；对齐内容:间隔；对齐项目:居中；边距顶部:20px；}输入 {宽度:25%；填充:8px；大纲:无；边框:3px 实心 rgb(0, 0, 0);边框半径:5px；背景颜色:RGB(209、223、218)；}标签 {字体大小:20px；颜色:#f5f7fa；字体粗细:粗体；字母间距:1.1px；font-family: 'Open Sans', sans-serif;}按钮 {宽度:30%；填充:8px 0;边框半径:15px；字体大小:20px；font-family: 'Open Sans', sans-serif;背景:rgb(18, 49, 92);边界:无；白颜色;字体粗细:粗体；字母间距:1.2px；边距顶部:30px；}按钮:悬停{光标:指针；}按钮:焦点{大纲:无；}.秒{白颜色;字体大小:20px；font-family: 'Open Sans', sans-serif;字体粗细:粗体；}.错误 {红色;字体大小:20px；font-family: 'Open Sans', sans-serif;字体粗细:粗体；}

<头><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VMMDG0nZ"/><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin"<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZ7Np6G7"cross"匿名"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"cross<rV"/脚本><身体><div class="converter-wrapper"><div class="input-wrappers"><label for="hoursInput">输入小时数:</label><input type="number" id="hoursInput">

<div class="input-wrappers"><label for="minutesInput">输入分钟数:</label><input type="number" id="minutesInput">

<button id="convertBtn">转换</button><p id="timeInSeconds" class="seconds"></p><p id="errorMsg" class="error"></p>

</html>

在 id 为 hoursInput 和 minutesInput 的 HTML 输入元素中输入值时，点击 id 为 convertBtn 的 HTML 按钮，应显示转换后的秒数，错误消息应为空**但是当我们没有为输入的小时或分钟之一赋予价值时，它们会显示错误文本消息.但是当我们以小时和分钟为单位给出值时，错误文本消息显示仍然显示而不清除显示消息.当我们以小时和分钟为单位输入值时，在我们仅输入一个值进行测试之前，错误文本消息应该很清楚.所以请帮我写一些 javascript 代码**

解决方案

您不会改回文本.而且您正在添加更多错误消息.改用这个:

if (isNaN(hours) || isNaN(minutes)) {showError.textContent = "错误！！！请输入任何值";} 别的 {showError.textContent = "";showSeconds.textContent = "秒数";+ 秒；}

let convertBtnEl = document.getElementById("convertBtn");让 hoursInput = document.getElementById('hoursInput');让minutesinput = document.getElementById('minutesInput');函数计算(){var hours = parseInt(hoursInput.value);var 分钟 = parseInt(minutesinput.value);var 秒 = (小时 * 60 + 分钟) * 60;var showSeconds = document.getElementById("timeInSeconds");var showError = document.getElementById("errorMsg");如果(isNaN(小时)){showSeconds.style.display = "none";showError.style.display = "block";showError.textContent = "请输入有效的小时数";}否则如果(isNaN(分钟)){showSeconds.style.display = "none";showError.style.display = "block";showError.textContent = "请输入有效的分钟数";}别的 {showError.style.display = "无";showSeconds.style.display = "block";showSeconds.textContent = "秒数" + seconds;}}convertBtnEl.addEventListener("click", compute);

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700&1,7family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,701,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");身体 {最大宽度:100vw；高度:100vh；边距:0；填充:0；显示:弹性；对齐内容:居中；对齐项目:居中；背景:url(https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png) center/cover no-repeat 固定；}.converter-wrapper {显示:弹性；弹性方向:列；对齐项目:居中；}.input-wrappers {宽度:100%；显示:弹性；对齐内容:间隔；对齐项目:居中；边距顶部:20px；}输入 {宽度:25%；填充:8px；大纲:无；边框:3px 实心 rgb(0, 0, 0);边框半径:5px；背景颜色:rgb(209, 223, 218);}标签 {字体大小:20px；颜色:#f5f7fa；字体粗细:粗体；字母间距:1.1px；font-family: 'Open Sans', sans-serif;}按钮 {宽度:30%；填充:8px 0;边框半径:15px；字体大小:20px；font-family: 'Open Sans', sans-serif;背景:rgb(18, 49, 92);边界:无；白颜色;字体粗细:粗体；字母间距:1.2px；边距顶部:30px；}按钮:悬停{光标:指针；}按钮:焦点{大纲:无；}.秒{白颜色;字体大小:20px；font-family: 'Open Sans', sans-serif;字体粗细:粗体；}.错误 {红色;字体大小:20px；font-family: 'Open Sans', sans-serif;字体粗细:粗体；}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"/><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin"<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZ7Np6G7"cross"匿名"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"cross<rV"/脚本><身体><div class="converter-wrapper"><div class="input-wrappers"><label for="hoursInput">输入小时数:</label><input type="number" id="hoursInput">

<div class="input-wrappers"><label for="minutesInput">输入分钟数:</label><input type="number" id="minutesInput">

<button id="convertBtn">转换</button><p id="timeInSeconds" class="seconds"></p><p id="errorMsg" class="error"></p>

let convertBtnEl = document.getElementById("convertBtn");
convertBtn.addEventListener("click", function() {
    var hours = parseInt(document.getElementById('hoursInput').value);
    var minutes = parseInt(document.getElementById('minutesInput').value);
    var seconds = (hours * 60 + minutes) * 60;
    console.log(hours);
    var showSeconds = document.getElementById("timeInSeconds");
    var showError = document.getElementById("errorMsg");
    if (isNaN(hours) || isNaN(minutes)) {
        showError.textContent += "Error!!! Please enter any value";
    } else {
        showSeconds.textContent = "the number in seconds " + seconds;
    }
});

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");

body {
    max-width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png) center/cover no-repeat fixed;
}

.converter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-wrappers {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

input {
    width: 25%;
    padding: 8px;
    outline: none;
    border: 3px solid rgb(0, 0, 0);
    border-radius: 5px;
    background-color: rgb(209, 223, 218);
}

label {
    font-size: 20px;
    color: #f5f7fa;
    font-weight: bold;
    letter-spacing: 1.1px;
    font-family: 'Open Sans', sans-serif;
}

button {
    width: 30%;
    padding: 8px 0;
    border-radius: 15px;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    background: rgb(18, 49, 92);
    border: none;
    color: white;
    font-weight: bold;
    letter-spacing: 1.2px;
    margin-top: 30px;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: none;
}

.seconds {
    color: white;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}

.error {
    color: red;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <div class="converter-wrapper">
        <div class="input-wrappers">
            <label for="hoursInput">Enter the number of hours:</label>
            <input type="number" id="hoursInput">
        </div>
        <div class="input-wrappers">
            <label for="minutesInput">Enter the number of minutes:</label>
            <input type="number" id="minutesInput">
        </div>
        <button id="convertBtn">Convert</button>
        <p id="timeInSeconds" class="seconds"></p>
        <p id="errorMsg" class="error"></p>
    </div>
</body>

</html>

When values are entered in HTML input elements with ids hoursInput and minutesInput, the HTML button with id convertBtn is clicked, the converted seconds should be shown, and the error message should be empty ** But when we not giving value to one of the input hours or minutes they displays error text message. But when we giving values in both hours and minutes the error text message displays still showing without clearing the display message. when we enter values in hours and minutes the error text message should be clear when before we escaped on testing with only one value entered. So please help me with some code in javascript**

解决方案

You're not changing back the text. And you're adding more error messages. Use this instead:

if (isNaN(hours) || isNaN(minutes)) {
    showError.textContent = "Error!!! Please enter any value";
} else {
    showError.textContent = " ";
    showSeconds.textContent = "the number in seconds " + seconds;
}


let convertBtnEl = document.getElementById("convertBtn");
let hoursInput = document.getElementById('hoursInput');
let minutesinput = document.getElementById('minutesInput');

 function compute() {
  var hours = parseInt(hoursInput.value);
  var minutes = parseInt(minutesinput.value);
  var seconds = (hours * 60 + minutes) * 60;
  
  var showSeconds = document.getElementById("timeInSeconds");
  var showError = document.getElementById("errorMsg");
  if (isNaN(hours)) {
    showSeconds.style.display = "none";
    showError.style.display = "block";
    showError.textContent = "Please enter a valid number of hours";
  }
  else if (isNaN(minutes)) {
    showSeconds.style.display = "none";
    showError.style.display = "block";
    showError.textContent = "Please enter a valid number of minutes";
  }
   else {
    showError.style.display = "none";
    showSeconds.style.display = "block";
    showSeconds.textContent = "the number in seconds " + seconds;
  }
}

convertBtnEl.addEventListener("click", compute);

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
body {
  max-width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png) center/cover no-repeat fixed;
}

.converter-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-wrappers {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

input {
  width: 25%;
  padding: 8px;
  outline: none;
  border: 3px solid rgb(0, 0, 0);
  border-radius: 5px;
  background-color: rgb(209, 223, 218);
}

label {
  font-size: 20px;
  color: #f5f7fa;
  font-weight: bold;
  letter-spacing: 1.1px;
  font-family: 'Open Sans', sans-serif;
}

button {
  width: 30%;
  padding: 8px 0;
  border-radius: 15px;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  background: rgb(18, 49, 92);
  border: none;
  color: white;
  font-weight: bold;
  letter-spacing: 1.2px;
  margin-top: 30px;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: none;
}

.seconds {
  color: white;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

.error {
  color: red;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<body>
  <div class="converter-wrapper">
    <div class="input-wrappers">
      <label for="hoursInput">Enter the number of hours:</label>
      <input type="number" id="hoursInput">
    </div>
    <div class="input-wrappers">
      <label for="minutesInput">Enter the number of minutes:</label>
      <input type="number" id="minutesInput">
    </div>
    <button id="convertBtn">Convert</button>
    <p id="timeInSeconds" class="seconds"></p>
    <p id="errorMsg" class="error"></p>
  </div>
</body>

这篇关于时间转换器网页设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆