3
Also mein Problem ist, dass ich Text (Deckkraft) in js animieren möchte, nachdem Sie die Eingabetaste drücken, aber ich weiß nicht, wie es mit meinem Code, den ich schrieb, zu tun. Ich kann nicht erklären, warum ich nicht animieren kann, aber ich kann ALLE meinen Code zeigen und du wirst es verstehen.Animieren von Text in Javascript
function handle(e){
if(e.keyCode === 13){
e.preventDefault();
theaction();
}
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function titleCase(str) {
str = str.toLowerCase().split(' ');
for(var i = 0; i < str.length; i++){
str[i] = str[i].split('');
str[i][0] = str[i][0].toUpperCase();
str[i] = str[i].join('');
}
return str.join(' ');
}
function theaction() {
\t var int = document.getElementById("every").value;
\t var inp = int.toUpperCase();
\t var lop;
\t var dom = [".AERO",".BIZ",".CAT",".COM",".COOP",".EDU",".GOV",".INFO",".INT",".JOBS",".MIL",".MOBI",".MUSEUM",
".NAME",".NET",".ORG",".TRAVEL",".AC",".AD",".AE",".AF",".AG",".AI",".AL",".AM",".AN",".AO",".AQ",".AR",".AS",".AT",".AU",".AW",
".AZ",".BA",".BB",".BD",".BE",".BF",".BG",".BH",".BI",".BJ",".BM",".BN",".BO",".BR",".BS",".BT",".BV",".BW",".BY",".BZ",".CA",
".CC",".CD",".CF",".CG",".CH",".CI",".CK",".CL",".CM",".CN",".CO",".CR",".CS",".CU",".CV",".CX",".CY",".CZ",".DE",".DJ",".DK",".DM",
".DO",".DZ",".EC",".EE",".EG",".EH",".ER",".ES",".ET",".EU",".FI",".FJ",".FK",".FM",".FO",".FR",".GA",".GB",".GD",".GE",".GF",".GG",".GH",
".GI",".GL",".GM",".GN",".GP",".GQ",".GR",".GS",".GT",".GU",".GW",".GY",".HK",".HM",".HN",".HR",".HT",".HU",".ID",".IE",".IL",".IM",
".IN",".IO",".IQ",".IR",".IS",".IT",".JE",".JM",".JO",".JP",".KE",".KG",".KH",".KI",".KM",".KN",".KP",".KR",".KW",".KY",".KZ",".LA",".LB",
".LC",".LI",".LK",".LR",".LS",".LT",".LU",".LV",".LY",".MA",".MC",".MD",".MG",".MH",".MK",".ML",".MM",".MN",".MO",".MP",".MQ",
".MR",".MS",".MT",".MU",".MV",".MW",".MX",".MY",".MZ",".NA",".NC",".NE",".NF",".NG",".NI",".NL",".NO",".NP",".NR",".NU",
".NZ",".OM",".PA",".PE",".PF",".PG",".PH",".PK",".PL",".PM",".PN",".PR",".PS",".PT",".PW",".PY",".QA",".RE",".RO",".RU",".RW",
".SA",".SB",".SC",".SD",".SE",".SG",".SH",".SI",".SJ",".SK",".SL",".SM",".SN",".SO",".SR",".ST",".SU",".SV",".SY",".SZ",".TC",".TD",".TF",
".TG",".TH",".TJ",".TK",".TM",".TN",".TO",".TP",".TR",".TT",".TV",".TW",".TZ",".UA",".UG",".UK",".UM",".US",".UY",".UZ", ".VA",".VC",
".VE",".VG",".VI",".VN",".VU",".WF",".WS",".YE",".YT",".YU",".ZA",".ZM",".ZR",".ZW"];
\t if (dom.some(function(v) { return inp.indexOf(v) >= 0; })) {
if (inp.includes("HTTP://") || inp.includes("HTTPS://")) {
\t window.location.href = inp.toLowerCase();
}
else {
\t var ht = "http://";
\t var loplink = ht.concat(inp);
\t window.location.href = loplink;
}
}
else if (inp.includes("GOOGLE:")) {
var googlesearch = inp.substr(7);
window.location.href = "https://www.google.fi/search?q=" + googlesearch.toLowerCase();
}
else if (inp.includes("DDG:")) {
\t var ddgsearch = inp.substr(4);
\t window.location.href = "https://duckduckgo.com/?q=" + ddgsearch.toLowerCase();
}
else if (inp.includes("QWANT:")) {
\t var qwantsearch = inp.substr(6);
\t window.location.href = "https://www.qwant.com/?l=en&h=1&hc=1&a=1&s=0&b=1&i=1&r=en&sr=en&q=" + qwantsearch.toLowerCase();
}
else if (inp.includes("HSL:")) {
\t var hslsearch = inp.substr(4);
\t window.location.href = "https://m.reittiopas.fi/en/index.php?mod=ls&txtSearch=" + hslsearch.toLowerCase() + "&search=Search";
}
else if (inp.includes("MY NAME IS")) {
\t var nameis = inp.split("IS ")[1];
\t var namelow = nameis.toLowerCase();
\t var namefcap = titleCase(namelow);
\t var namefinal = namefcap.split(' ').filter(function(v){return v!==' '});
if (namefinal.length < 3) {
\t lop = "Hello " + namefinal + "! My name is DAT BOIYIIYIYIYIYI!";
\t lop = lop.replace(",", " ");
\t document.getElementById("output").innerHTML = lop;
}
else {
\t lop = "You have a beutiful name!";
\t document.getElementById("output").innerHTML = lop;
\t sleep(5000);
\t window.location.href = "http://www.zombo.com";
} \t
\t
}
else if (inp.includes("BG:")) {
\t var bgGoodness = inp.substr(3);
\t document.getElementById("theBodyOfAModel").style.backgroundColor = bgGoodness;
}
else {
\t switch(inp){
\t case 'HEY':
\t case 'HEY!':
\t case 'HI!':
\t case 'HI':
\t case 'HELLO':
\t case 'HELLO!':
\t \t lop = "Hey!";
\t \t break;
\t case 'HEY SIRI!':
\t case 'HEY SIRI':
\t case 'HI SIRI':
\t case 'HI SIRI!':
\t case 'HELLO SIRI':
\t case 'HELLO SIRI!':
\t \t lop = "I'm not Siri! I'm dat BOiiii!";
\t \t break;
\t case 'FOO':
\t \t lop = "Bar";
\t \t break;
\t case 'BAR':
\t \t lop = "Foo";
\t \t break;
\t case 'FOOBAR':
\t case 'FOO BAR':
\t \t lop = 'Searching for bars called "Foo".....';
\t \t break;
\t case 'WHAT TIME IS IT?':
\t case 'WHAT TIME IS IT':
\t case 'WHAT IS THE TIME?':
\t case 'WHAT IS THE TIME?':
\t \t lop = "DEMO: " + Date();
\t \t break;
\t default:
\t \t lop = "U WOT M8??";
\t \t break;
\t }
\t document.getElementById("output").innerHTML = lop;
}
}
function stylejs() {
\t document.getElementById("every").style.width = "600px";
\t document.getElementById("every").style.borderColor = "blue";
\t document.getElementById("every").style.cursor = "auto";
}body {
\t padding: 0;
\t background-color: #ecf0f1;
}
#every {
\t font-size: 25px;
\t position: absolute;
\t top: 50%;
\t left: 50%;
\t margin-right: 0px;
\t margin-bottom: 0px:;
\t width: 300px;
\t /*340px*/
\t height: 30px;
\t /*70px*/
\t margin-left: -173.4px;
\t margin-top: -38.08px;
\t padding: 20px;
\t vertical-align: middle;
\t font-family: 'Open Sans', sans-serif;
\t border: 1px solid #000;
\t border-radius: 5px;
\t background-color: #fff;
\t color: #000;
\t -webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:hover {
\t border-color: #2980b9;
\t background-color: #fff;
\t color: #000;
}
#every:focus {
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:not(:focus) {
\t cursor: pointer;
}
#output {
\t padding: 0px;
\t font-size: 28px;
\t font-family: 'Open Sans', sans-serif;
\t margin: 0px;
\t text-align: center;
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t user-select: none;
\t -webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#outwrapper {
\t height: 120px;
\t width: 500px;
\t position: absolute;
\t top: 55%;
\t left: 50%;
\t padding: 0px;
\t margin-left: -250px;
\t margin-top: 0px;
\t margin-bottom: 0px:
\t margin-right: 0px;
\t text-align: center;
}<body id="theBodyOfAModel">
<form onkeypress="handle(event)" action="#">
<input onclick="stylejs();" autocomplete="off" placeholder="Type Something..." type="text" id="every"/>
</form>
<div id="outwrapper">
<p id="output"></p>
</div>http://jsbin.com/sevesujubo/edit?html,js,output
Im traurig über die seltsamen ID und Funktionsnamen. Und keine jquery plz, auch wenn es es einfacher machen würde.
P.S Auch wenn Sie mir nicht helfen können, wäre es schön, wenn Sie meinen Code verbessern könnten. Danke (:
der Text Sie wondring zu animieren? –
Wenn Sie etwas in die eingeben und es dann etwas ausgibt. Also die Ausgabe. – JUSTSOMERANDOMGUY
keine Rückmeldung?. –