我正在尝试测试这个 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/