Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #39224 > unrolled thread

Great animation, that you all may like.

Started byChrictjan Robam <he12457@hotmail.com>
First post2020-12-05 03:37 -0800
Last post2021-01-09 13:11 -0800
Articles 10 — 4 participants

Back to article view | Back to comp.lang.javascript

Contents

  Great animation, that you all may like. Chrictjan Robam <he12457@hotmail.com> - 2020-12-05 03:37 -0800
    Re: Great animation, that you all may like. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-12-05 16:04 +0100
      Re: Great animation, that you all may like. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-12-05 16:54 +0100
      Re: Great animation, that you all may like. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-12-05 16:56 +0100
        Re: Great animation, that you all may like. Chrictjan Robam <he12457@hotmail.com> - 2020-12-06 02:19 -0800
          Re: Great animation, that you all may like. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-12-06 16:16 +0100
            Re: Great animation, that you all may like. Chrictjan Robam <he12457@hotmail.com> - 2020-12-06 09:55 -0800
              Re: Great animation, that you all may like. I I <he12457@hotmail.com> - 2021-01-09 08:56 -0800
                Re: Great animation, that you all may like. I I <kpuctjanpobam@mail.com> - 2021-01-09 13:03 -0800
                  Re: Great animation, that you all may like. I I <kpuctjanpobam@mail.com> - 2021-01-09 13:11 -0800

#39224 — Great animation, that you all may like.

FromChrictjan Robam <he12457@hotmail.com>
Date2020-12-05 03:37 -0800
SubjectGreat animation, that you all may like.
Message-ID<f9689b96-2a84-42e3-9d26-cb687c41b4d0n@googlegroups.com>
<html>
<head>
<style>
body {
   height: 100%;
   color:green;
   background-color: black;
}
#a1 {
   width: 100vw;
   height: 100%;
   font-size: 6vw;
   font-weight: bold; 
   overflow-y:hidden;
   line-height:5vw;

}
#aaa1 {
   line-height:5vw;
}
</style>
</head>
<body>

<div id="a1">
</div>
<script>
var next=0;
var next01="";
function a2() {
    setInterval(function(){
       var a=Math.round(Math.random()*99999);
       var aa=document.getElementById("a1").innerHTML;
       var aa1=document.body.clientWidth;
       var aa2=Math.round(aa1/64);
       if(aa.length>2100000) aa="";
       if(next<aa2) {
         next01=a+" "+next01;
         next++;
       }
       if(next==aa2) {
           document.getElementById("a1").innerHTML="<div id='aaa1'>"+next01+"</div>"+aa;
           next=0;
           next01="";
       }

    }, 1);
}

a2();
</script>
</body>
</html>

Khrictjan Robam

Telephone number: 372 57865442
E-mail: he12457 hotmail c o m

[toc] | [next] | [standalone]

#39225

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2020-12-05 16:04 +0100
Message-ID<XnsAC8AA3940F6BFeejj99@194.109.6.166>
In reply to#39224
Chrictjan Robam <he12457@hotmail.com> wrote on 05 Dec 2020 in
comp.lang.javascript: 

> <html>
> <head>
> <style>
> body {
>    height: 100%;
>    color:green;
>    background-color: black;
>}
>#a1 {
>    width: 100vw;
>    height: 100%;
>    font-size: 6vw;
>    font-weight: bold; 
>    overflow-y:hidden;
>    line-height:5vw;
> 
>}
>#aaa1 {
>    line-height:5vw;
>}
> </style>
> </head>
> <body>
> 
> <div id="a1">
> </div>
> <script>
> var next=0;
> var next01="";
> function a2() {
>     setInterval(function(){
>        var a=Math.round(Math.random()*99999);
>        var aa=document.getElementById("a1").innerHTML;
>        var aa1=document.body.clientWidth;
>        var aa2=Math.round(aa1/64);
>        if(aa.length>2100000) aa="";
>        if(next<aa2) {
>          next01=a+" "+next01;
>          next++;
>        }
>        if(next==aa2) {
>            document.getElementById("a1").innerHTML="<div
>            id='aaa1'>"+next01+"</div>"+aa; next=0;
>            next01="";
>        }
> 
>     }, 1);
>}
> 
> a2();
> </script>
> </body>
> </html>

There is a lot of unnecessary code like the looping,
making the interval dependent on the size.

Try this:

=========================
<html>

<head>

<style>
body {
	color:white;
	background-color: black;
	font-size: 3vw;
	font-weight: bold; 
	line-height:5vw;
}
</style>

<script>

const f = () => {
	let inner = '';
	let count = 0;
	while (count < 6 * 6) {
		inner += ' ' + Math.floor(Math.random()*99999);
		count++;
		if (count % 6 == 0) inner += '<br>';
	};
	document.body.innerHTML = inner;
};

window.onload = setInterval(f, 100);

</script>

</head>

<body></body>

</html>

=========================



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#39226

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2020-12-05 16:54 +0100
Message-ID<XnsAC8AAC0032F94eejj99@194.109.6.166>
In reply to#39225
"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 05 Dec 2020 in 
comp.lang.javascript:

> Chrictjan Robam <he12457@hotmail.com> wrote on 05 Dec 2020 in
> comp.lang.javascript: 
> 
>> <html>
>> <head>
>> <style>
>> body {
>>    height: 100%;
>>    color:green;
>>    background-color: black;
>>}
>>#a1 {
>>    width: 100vw;
>>    height: 100%;
>>    font-size: 6vw;
>>    font-weight: bold; 
>>    overflow-y:hidden;
>>    line-height:5vw;
>> 
>>}
>>#aaa1 {
>>    line-height:5vw;
>>}
>> </style>
>> </head>
>> <body>
>> 
>> <div id="a1">
>> </div>
>> <script>
>> var next=0;
>> var next01="";
>> function a2() {
>>     setInterval(function(){
>>        var a=Math.round(Math.random()*99999);
>>        var aa=document.getElementById("a1").innerHTML;
>>        var aa1=document.body.clientWidth;
>>        var aa2=Math.round(aa1/64);
>>        if(aa.length>2100000) aa="";
>>        if(next<aa2) {
>>          next01=a+" "+next01;
>>          next++;
>>        }
>>        if(next==aa2) {
>>            document.getElementById("a1").innerHTML="<div
>>            id='aaa1'>"+next01+"</div>"+aa; next=0;
>>            next01="";
>>        }
>> 
>>     }, 1);
>>}
>> 
>> a2();
>> </script>
>> </body>
>> </html>
> 
> There is a lot of unnecessary code like the looping,
> making the interval dependent on the size.
> 
> Try this:
> 
> =========================
> <html>
> 
> <head>
> 
> <style>
> body {
>      color:white;
>      background-color: black;
>      font-size: 3vw;
>      font-weight: bold; 
>      line-height:5vw;
>}
> </style>
> 
> <script>
> 
> const f = () => {
>      let inner = '';
>      let count = 0;
>      while (count < 6 * 6) {
>           inner += ' ' + Math.floor(Math.random()*99999);
>           count++;
>           if (count % 6 == 0) inner += '<br>';
>     };
>      document.body.innerHTML = inner;
>};
> 
> window.onload = setInterval(f, 100);
> 
> </script>
> 
> </head>
> 
> <body></body>
> 
> </html>
> 
> =========================

Or constructing a table:

=====================
<html>

<head>

<style>
body {
	color:white;
	background-color: black;
	font-size: 3vw;
	font-weight: bold; 
	line-height:5vw;
}
td {
	text-align:right;
	border:dotted gray 1px;
	padding:2px 20px;
}
</style>

<script>

const f = () => {
	let inner = '<table><tr>';
	let count = 0;
	while (count < 6 * 6) {
		inner += '<td>' + Math.floor(Math.random()*99999);
		count++;
		if (count % 6 == 0) inner += '<tr>';
	};
	document.body.innerHTML = inner + '</table>';
};

window.onload = setInterval(f,100);

</script>

</head>

<body></body>

</html>
=====================



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#39227

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2020-12-05 16:56 +0100
Message-ID<XnsAC8AAC47ABC89eejj99@194.109.6.166>
In reply to#39225
"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 05 Dec 2020 in 
comp.lang.javascript:

> Chrictjan Robam <he12457@hotmail.com> wrote on 05 Dec 2020 in
> comp.lang.javascript: 
> 
>> <html>
>> <head>
>> <style>
>> body {
>>    height: 100%;
>>    color:green;
>>    background-color: black;
>>}
>>#a1 {
>>    width: 100vw;
>>    height: 100%;
>>    font-size: 6vw;
>>    font-weight: bold; 
>>    overflow-y:hidden;
>>    line-height:5vw;
>> 
>>}
>>#aaa1 {
>>    line-height:5vw;
>>}
>> </style>
>> </head>
>> <body>
>> 
>> <div id="a1">
>> </div>
>> <script>
>> var next=0;
>> var next01="";
>> function a2() {
>>     setInterval(function(){
>>        var a=Math.round(Math.random()*99999);
>>        var aa=document.getElementById("a1").innerHTML;
>>        var aa1=document.body.clientWidth;
>>        var aa2=Math.round(aa1/64);
>>        if(aa.length>2100000) aa="";
>>        if(next<aa2) {
>>          next01=a+" "+next01;
>>          next++;
>>        }
>>        if(next==aa2) {
>>            document.getElementById("a1").innerHTML="<div
>>            id='aaa1'>"+next01+"</div>"+aa; next=0;
>>            next01="";
>>        }
>> 
>>     }, 1);
>>}
>> 
>> a2();
>> </script>
>> </body>
>> </html>
> 
> There is a lot of unnecessary code like the looping,
> making the interval dependent on the size.
> 
> Try this:
> 
> =========================
> <html>
> 
> <head>
> 
> <style>
> body {
>      color:white;
>      background-color: black;
>      font-size: 3vw;
>      font-weight: bold; 
>      line-height:5vw;
>}
> </style>
> 
> <script>
> 
> const f = () => {
>      let inner = '';
>      let count = 0;
>      while (count < 6 * 6) {
>           inner += ' ' + Math.floor(Math.random()*99999);
>           count++;
>           if (count % 6 == 0) inner += '<br>';
>     };
>      document.body.innerHTML = inner;
>};
> 
> window.onload = setInterval(f, 100);
> 
> </script>
> 
> </head>
> 
> <body></body>
> 
> </html>
> 
> =========================

Or using a table:

=====================
<html>

<head>

<style>
body {
	color:white;
	background-color: black;
	font-size: 3vw;
	font-weight: bold; 
	line-height:5vw;
}
td {
	text-align:right;
	border:dotted gray 1px;
	padding:2px 20px;
}
</style>

<script>

const f = () => {
	let inner = '<table><tr>';
	let count = 0;
	while (count < 6 * 6) {
		inner += '<td>' + Math.floor(Math.random()*99999);
		count++;
		if (count % 6 == 0) inner += '<tr>';
	};
	document.body.innerHTML = inner + '</table>';
};

window.onload = setInterval(f,100);

</script>

</head>

<body></body>

</html>

=====================


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#39230

FromChrictjan Robam <he12457@hotmail.com>
Date2020-12-06 02:19 -0800
Message-ID<300c22a8-0b67-4280-a8e7-957f9fae1e9bn@googlegroups.com>
In reply to#39227
This is not the same, because the numbers ain't coming from up.

Chrictjan Robam

Telephone number: 372 57865442
E-mail: he12457 hotmail c o m

[toc] | [prev] | [next] | [standalone]

#39231

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2020-12-06 16:16 +0100
Message-ID<XnsAC8BA588BA050eejj99@194.109.6.166>
In reply to#39230
Chrictjan Robam <he12457@hotmail.com> wrote on 06 Dec 2020 in 
comp.lang.javascript:

> This is not the same, because the numbers ain't coming from up.

What is "from up"?

And why should it be the same?



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#39232

FromChrictjan Robam <he12457@hotmail.com>
Date2020-12-06 09:55 -0800
Message-ID<2579aaaf-b334-4927-892a-3345452bc221n@googlegroups.com>
In reply to#39231
Evertjan. kirjutas pühapäev, 6. detsember 2020 kl 17:17:09 UTC+2:
> Chrictjan Robam <he1...@hotmail.com> wrote on 06 Dec 2020 in 
> comp.lang.javascript:
> > This is not the same, because the numbers ain't coming from up.
> What is "from up"? 
> 
> And why should it be the same?
> -- 
> Evertjan. 
> The Netherlands. 
> (Please change the x'es to dots in my emailaddress)


Hey, please try this code, to see it in slow motion:

<html>
<head>
<style>
body {
height: 100%;
color:green;
background-color: black;
}
#a1 {
width: 100vw;
height: 100%;
font-size: 6vw;
font-weight: bold;
overflow-y:hidden;
line-height:5vw;

}
#aaa1 {
line-height:5vw;
}
</style>
</head>
<body>

<div id="a1">
</div>
<script>
var next=0;
var next01="";
function a2() {
setInterval(function(){
var a=Math.round(Math.random()*99999);
var aa=document.getElementById("a1").innerHTML;
var aa1=document.body.clientWidth;
var aa2=Math.round(aa1/144);
if(aa.length>2100000) aa="";
if(next<aa2) {
next01=a+" "+next01;
next++;
}
if(next==aa2) {
document.getElementById("a1").innerHTML="<div id='aaa1'>"+next01+"</div>"+aa;
next=0;
next01="";
}

}, 113);
}

a2();
</script>
</body>
</html> 


Chrictjan Robam

Telephone number: 372 57865442
E-mail: he12457 hotmail c o m

[toc] | [prev] | [next] | [standalone]

#39357

FromI I <he12457@hotmail.com>
Date2021-01-09 08:56 -0800
Message-ID<d90782ad-544d-4c72-80ed-86e24a73fd22n@googlegroups.com>
In reply to#39232
Anybody knows, how to make it faster ?
I made text smaller in code:

<html> 
<head> 
<style> 
body { 
height: 100%; 
color:green; 
background-color: black; 
} 
#a1 { 
width: 100vw; 
height: 100%; 
font-size: 1vw; 
font-weight: bold; 
overflow-y:hidden; 
line-height:1vw; 

} 
#aaa1 { 
line-height:1vw; 
} 
</style> 
</head> 
<body> 

<div id="a1"> 
</div> 
<script> 
var next=0; 
var next01=""; 
function a2() { 
setInterval(function(){ 
var a=Math.round(Math.random()*99999); 
var aa=document.getElementById("a1").innerHTML; 
var aa1=document.body.clientWidth; 
var aa2=Math.round(aa1/44); 
if(aa.length>21000000000) aa=""; 
if(next<aa2) { 
next01=a+" "+next01; 
next++; 
} 
if(next==aa2) { 
document.getElementById("a1").innerHTML="<div id='aaa1'>"+next01+"</div>"+aa; 
next=0; 
next01=""; 
} 

}, 1); 
} 

a2(); 
</script> 
</body> 
</html>





IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

[toc] | [prev] | [next] | [standalone]

#39358

FromI I <kpuctjanpobam@mail.com>
Date2021-01-09 13:03 -0800
Message-ID<535aeab2-967b-4be3-94ca-b60841b95ee4n@googlegroups.com>
In reply to#39357
The startpoint:

<html> 
<head> 
<style> 
body { 
height: 100%; 
color:green; 
background-color: black; 
} 
#a1 { 
width: 95%; 
height: 95%; 
font-size: 2vw; 
font-weight: bold; 
overflow-y:hidden; 
line-height:2vw; 
margin-top:2%;
} 
</style> 
</head> 
<body> 

<div id="a1"> 
</div> 
<script> 
function a2() { 
setInterval(function(){ 
var a=Math.round(Math.random()*999999999999); 
document.getElementById("a1").prepend(a+" "); 

if(a.length>1000) {
   document.getElementById("a1").innerHTML=document.getElementById("a1").innerHTML.substr(0,1000);
}
}, 20); 
} 

a2(); 
</script> 
</body> 
</html>



IIIIIIIIIIIIII

[toc] | [prev] | [next] | [standalone]

#39359

FromI I <kpuctjanpobam@mail.com>
Date2021-01-09 13:11 -0800
Message-ID<c5f5084d-e410-48dc-a557-58f23a8f920fn@googlegroups.com>
In reply to#39358
The solution:

<html> 
<head> 
<style> 
body { 
height: 100%; 
color:green; 
background-color: black; 
} 
#a1 { 
width: 95%; 
height: 94%; 
font-size: 2vw; 
font-weight: bold; 
overflow-y:hidden; 
line-height:2vw; 
margin-top:2%;
} 
</style> 
</head> 
<body> 

<div id="a1"> 
</div> 
<script> 
function a2() { 
setInterval(function(){ 
for(var i=0; i<5; i++) {
  var a=Math.round(Math.random()*999999999999); 
  document.getElementById("a1").prepend(a+" "); 
}

var a=document.getElementById("a1").innerHTML;
if(a.length>1000) {
   document.getElementById("a1").innerHTML=a.substr(0,2245);
}
}, 111); 
} 

a2(); 
</script> 
</body> 
</html>


Kristjan Robam
iiiiiiiiiiiia at bestmail . u s
372 6861327

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web