Question

我正在做一个非常简单的项目，提示用户输入电话号码，然后显示用户可以单击以拨打电话的电话号码。

我以前使用过，但不确定如何在该代码中插入用户输入的数字。

在代码中，我附上我知道第38行是编辑H2标签并输入他们编写的号码（保存为“名称”）的地方，但是我在不中断事情的情况下无法放入呼叫链接。

谢谢！

$(function() {
  "use strict"

  var name;
  var loggedin = $(".loggedin").hide();
  var t = 500;

  function store() {
    name = $("input#username").val();
  }

  function init() {
    $("input[type='submit']").on("click", function() {
      store();
      $(".login_inner, .login_inner__avatar").animate({
        'opacity': '0'
      }, t);
      setTimeout(function() {
        $(".login_inner__check").css({
          'opacity': '1',
          'animation': 'spinner 4s 0s linear',
          'transition': 'all ease 3s'
        });
      });
      setTimeout(function() {
        $(".login_inner__check--complete").find('i').animate({
          'opacity': '1'
        }, 500);
      }, 4200);
      setTimeout(function() {
        $(".login").fadeOut(500, function() {
          $(this).remove();
        });
      }, 5000);
      setTimeout(function() {
        loggedin.fadeIn(t, function() {
          $(this).show();
          $(this).find('h2').html("Just Click to Call Her " + name);
        });
      }, 5500);
      setTimeout(function() {
        $(".loggedin h2").animate({
          'opacity': '1'
        }, t);
      }, 6000);
    });
  };
  init();
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
}

html, body {
  background: #EDF2F4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login {
  background: #2B2D42;
  border-radius: 4px;
  width: 300px;
  height: auto;
}
.login_inner {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
.login_inner__avatar {
  background: url(https://image.flaticon.com/icons/png/512/374/374995.png);
  background-size: cover;
  border: 3px solid #EDF2F4;
  width: 4em;
  height: 4em;
  margin: 0 auto;
  -webkit-transform: translateY(-35px);
          transform: translateY(-35px);
  border-radius: 100%;
}
.login_inner__check {
  border: 1px dashed #FFF;
  border-radius: 100%;
  width: 4em;
  height: 4em;
  position: absolute;
  margin: -185px 120px;
  opacity: 0;
  text-align: center;
}
.login_inner__check--complete i {
  line-height: 4em;
  color: #FFF;
  opacity: 0;
}
.login_inner input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #33354e;
  width: 100%;
  padding: 1.1em;
  color: #FFF;
  outline: none;
  font-size: 0.9em;
  text-align: left;
}
.login_inner input:last-of-type {
  border-bottom: none;
}
.login_inner input[type="submit"] {
  background: #4ECDC4;
  cursor: pointer;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  text-align: center;
  margin: 3em auto 0 auto;
}

.loggedin {
  background: #2B2D42;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.loggedin h2 {
  opacity: 0;
  color: #FFF;
  text-align: center;
  font-size: 1.7em;
}

::-webkit-input-placeholder {
  color: #FFF;
}

:-moz-placeholder {
  color: #FFF;
}

::-moz-placeholder {
  color: #FFF;
}

:-ms-input-placeholder {
  color: #FFF;
}

::-ms-input-placeholder {
  color: #FFF;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sign Up Page - UI Concept</title>
  <link href='https://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


      <link rel="stylesheet" href="css/style.css">


</head>

<body>

  <div class='login'>
  <div class='login_inner'>
    <div class='login_inner__avatar'></div>
    <input id='username' placeholder="What is your Grandma's phone number?" type='number'>
    <input type='submit' value='Sign up'>
  </div>
  <div class='login_inner__check'>
    <div class='login_inner__check--complete'>
      <i class='fa fa-check'></i>
    </div>
  </div>
</div>
<div class='loggedin'>
  <h2></h2>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>



    <script  src="js/index.js"></script>




</body>

</html>

根据用户输入建立电话号码链接

0 个答案: