个人中心
gpt4 book ai didi

JavaScript 变形按钮

转载 作者：行者123 更新时间：2023-11-29 15:16:59 25 4
gpt4 key购买 nike

我正在尝试测试这个 javascript我的代码 sublimetext3使用 chrome 构建，但我没有这样做。每当我构建 sublimetext3没有javascript代码正在工作。我测试了一个简单的警报代码，它工作正常。但是，当我插入这段代码时，我运气不好。该代码段也有效，所以它必须在我这边。有什么想法吗？

var mail = document.getElementById('mail'),
  input = document.getElementById('input'),
  sendText = document.querySelectorAll('.send'),
  send = document.getElementById('send'),
  tick = document.getElementById('p2'),
  p1 = document.getElementById('p1');

send.addEventListener('click', function() {
  sendText[0].textContent = "Sent";
  p1.style.opacity = 0;
  tick.style.opacity = 1;
});


input.addEventListener('keydown', function() {
  var email = this.value;
  openMail();
  if (validateEmail(email)) {
    closeMail();
  }
});

function openMail() {
  mail.setAttribute('points', "2.6,55.9 60.8,5.3 118.9,56.3");
  mail.setAttribute('transform', 'translate(0,-53)');
}

function closeMail() {
  mail.setAttribute('points', "2.6,3.1 60.8,48.8 118.9,3.6");
  mail.setAttribute('transform', 'translate(0,0)');
}

function validateEmail(email) {
  var ex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
  return ex.test(email);
}
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
html {
  box-sizing: border-box;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

body {
  background: #46cbda;
}

.subscribe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
}

.subscribe__wrapper {
  position: relative;
  height: 50px;
}

svg {
  width: 30px;
  height: 100%;
  position: absolute;
  right: 15px;
  top: 0;
  transition: transform 0.25s ease, width 0.25s ease;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 1.15em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

input[type="text"] {
  width: 88%;
  height: 60px;
  float: left;
  border: 0;
  outline: none;
  padding-left: 1em;
  padding-right: 1em;
  font-size: 1.25em;
}

button {
  position: absolute;
  right: 0;
  width: 12%;
  height: 60px;
  border: 0;
  background: #ec1a01;
  cursor: pointer;
  outline: none;
  transition: width 0.1s ease;
}

button .send {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s ease;
}

button:hover {
  width: 26%;
}

button:hover .send {
  opacity: 1;
}

button:hover .divider {
  animation: divider 0.15s 0.2s linear forwards;
}

button:hover svg {
  width: 23px;
  transform: rotate(-18deg) translateX(10px) translateY(3px);
  z-index: 10;
}

.divider {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 50;
  transform: translateY(-50%);
  width: 10px;
  height: 0;
  background: #ec1a01;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

@keyframes divider {
  to {
    height: 60%;
  }
}

#p2 {
  opacity: 0;
}

.more-concepts {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  text-decoration: none;
  color: #fff;
}

.more-concepts:hover {
  text-decoration: underline;
}


/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html>

<head>
  <title>title</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="subscribe">
    <div class="subscribe__wrapper">
      <input type="text" id="input" />
      <button id="send">
      <span class="divider"></span>
      <span class="send">Send</span>
      <svg width="122.6px" height="250px" viewBox="0 0 122.6 77.9">
        <g id="p2" transform="scale(2)" fill="#fff">
          <path d="M62.4,6.9L23.6,45.7c-0.3,0.3-0.9,0.3-1.2,0L0.3,23.7c-0.3-0.3-0.3-0.9,0-1.2l5.4-5.4c0.3-0.3,0.9-0.3,1.2,0l16.1,16.1
	L55.8,0.3c0.3-0.3,0.9-0.3,1.2,0l5.4,5.4C62.8,6,62.8,6.5,62.4,6.9L62.4,6.9z"/>
        </g>
        <g id="p1">
          <path fill="#FFFFFF" d="M113.6,8.1v61.8H8V8.1H113.6 M121.6,0.1H0v77.8h121.6V0.1L121.6,0.1z" />
          <polygon fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="9.9,73.1 60.8,48.8 115.5,73.1 " />
          <polyline id="mail" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-miterlimit="10" points="2.6,3.1 60.8,48.8 118.9,3.6 " />
          <polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="5.4,6.9 60.8,48.8 115.5,6.9 " />
        </g>
      </svg>
    </button>
    </div>
  </div>
</body>

</html>

Sublimetext 3 Chrome 构建

{
    "cmd": ["C:\\Program Files 
(x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]
}

最佳答案

哇，我觉得好傻。我没有正确放置我的脚本标签。我将它放在我的代码的开头，而它本应放在它所请求的元素之后。

关于JavaScript 变形按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48177271/

25 4 0
文章推荐： javascript - 通过 promise 链向下传递变量
文章推荐： Android: ClassCastException 添加 HeaderView 到 Listview
文章推荐： android - 如何动态地依次显示对话框？
文章推荐： php - 如何从 JSON_SEARCH 语法获取数组索引
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com