pavlovm503 4 سال پیش
والد
کامیت
5fc3309bef

+ 43 - 0
Pavlov_hm13/css/clean.css

@@ -0,0 +1,43 @@
+ html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+    	margin: 0;
+    	padding: 0;
+    	border: 0;
+    	font-size: 100%;
+    	font: inherit;
+    	vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
+    	display: block;
+    }
+    body {
+    	line-height: 1;
+    }
+    ol, ul {
+    	list-style: none;
+    }
+    blockquote, q {
+    	quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+    	content: '';
+    	content: none;
+    }
+    table {
+    	border-collapse: collapse;
+    	border-spacing: 0;
+    }

+ 47 - 0
Pavlov_hm13/css/style.css

@@ -0,0 +1,47 @@
+body{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background: #607D80;
+}
+.send{
+	
+	align-content: center;
+	width: 360px;
+	height: 480px;
+	background-color: #BFFAFF;
+	border: solid 5px #9DCDD1;	
+}
+.inp{
+	background: #9DCDD1;
+	padding: 10px;
+}
+.user_name{
+	width: 74%;
+}
+.user_massege{
+	width: 49%;
+}
+.chat{
+	height: 380px;
+	padding: 10px;
+	font-size: 10px;
+	overflow-x: scroll;
+white-space: normal;
+	background: #BFFAFF;
+}
+.chat div {
+	margin-top:10px;
+	width: auto;
+	border-bottom: solid #238078 1px;
+}
+.chat b {
+	font-size: 14px;
+	color: #397A80;
+}
+.chat time{
+	font-size: 12px;
+	margin-left: 5px;
+	color:#238078;
+}
+

+ 24 - 0
Pavlov_hm13/inddex.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Pavlov_Maik_FSA3</title>
+	<link rel="stylesheet" href="css/clean.css">
+	<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<div class="send">
+		<div class="inp">
+			<b>User name :</b>
+			<input type="text" class="user-name">
+		</div>
+		<section class="chat"></section>
+		<div class="inp">
+			<b>Massage :</b>
+			<input type="text" class="user-massege">
+			<button class="send-massege">SHOUT OUT</button>
+		</div>
+	</div>
+	<script src="script/script.js"></script>
+</body>
+</html>

+ 82 - 0
Pavlov_hm13/script/script.js

@@ -0,0 +1,82 @@
+function jsonPost(url, data) {
+    return new Promise((resolve, reject) => {
+        var x = new XMLHttpRequest();   
+        x.onerror = () => reject(new Error('jsonPost failed'))
+        x.open("POST", url, true);
+        x.send(JSON.stringify(data))
+
+        x.onreadystatechange = () => {
+            if (x.readyState == XMLHttpRequest.DONE && x.status == 200){
+                resolve(JSON.parse(x.responseText))
+            }
+            else if (x.status != 200){
+                reject(new Error('status is not 200'))
+            }
+        }
+    })
+}
+
+let inp1 = document.querySelector('.user-name'),
+	inp2 = document.querySelector('.user-massege'),
+	butn = document.querySelector('.send-massege'),
+	chat = document.querySelector('.chat');
+
+function sayComrad(){
+	function checkerson(){
+		inp1.value == '' || inp2.value == ''? butn.classList.add('block-btn'): butn.classList.remove('block-btn');
+    }
+    
+    inp1.oninput=inp2.oninput=checkerson;
+    
+    butn.onclick = () => {
+        (inp1.value == '' || inp2.value == '') ? reject() : resolve();
+        function resolve(){
+            jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: inp1.value, message: inp2.value});
+            inp1.value = '';
+            inp2.value = '';
+        }
+        function reject() {
+            butn.classList.add('block-btn');
+		}
+	}
+}
+sayComrad()
+let smsNamb = 0
+function getChatData() {
+    jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: smsNamb})
+        .then((d) => createSpaceForChat(d));
+}
+getChatData()
+
+function createSpaceForChat(data) {
+	console.log(smsNamb)
+	for (let details of data.data){
+		if (details.nick === '' || details.massage === '' || typeof(details.nick) === 'object' || typeof(details.nick) === 'undefined') {
+            continue;
+        };
+		let main = document.createElement('div');
+		let iner = document.createElement('div');
+		main.appendChild(iner);
+		
+		let timeSend = document.createElement('time');
+		let ttiimmee = new Date(details.timestamp);
+		timeSend.innerText = ((ttiimmee.getHours()+'').length>1 ? ttiimmee.getHours() : '0'+ttiimmee.getHours()) +':'+ ((ttiimmee.getMinutes()+'').length>1 ? ttiimmee.getMinutes() : '0'+ttiimmee.getMinutes());
+        main.appendChild(timeSend);
+		
+		let userName = document.createElement('b');
+		userName.innerText = details.nick + ':';
+		iner.appendChild(userName);
+		
+		let message = document.createElement('time');
+        message.innerText = details.message;
+        iner.appendChild(message);
+		
+		chat.prepend(main)
+	}
+   smsNumb = data.nextMessageId;
+   update();
+}
+
+function update(){
+	setInterval(getChatData(),100)
+}

BIN
Pavlov_hm14/bg.png


+ 43 - 0
Pavlov_hm14/css/clean.css

@@ -0,0 +1,43 @@
+ html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+    	margin: 0;
+    	padding: 0;
+    	border: 0;
+    	font-size: 100%;
+    	font: inherit;
+    	vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
+    	display: block;
+    }
+    body {
+    	line-height: 1;
+    }
+    ol, ul {
+    	list-style: none;
+    }
+    blockquote, q {
+    	quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+    	content: '';
+    	content: none;
+    }
+    table {
+    	border-collapse: collapse;
+    	border-spacing: 0;
+    }

+ 65 - 0
Pavlov_hm14/css/style.css

@@ -0,0 +1,65 @@
+body{
+	background: url(../bg.png) no-repeat;
+	background-size: 600px;
+}
+.traff-lighter{
+	width: 100px;
+	height: 100px;
+	display: block;
+	position: absolute;
+	margin:  180px 450px;
+}
+.traff{
+	background: url(../traff-lighter.png);
+	display: block;
+	width: 100px;
+	height: 100px;
+}
+.pos{
+	height: 5px;
+	width: 5px;
+	display: block;
+	position: absolute;
+	border-bottom: solid 5px silver;
+}
+.red{
+	top: 8px;
+	left: 36.4px;
+}
+.yellow{
+	top: 15.5px;
+	left: 36.4px;
+}
+.green{
+	top: 22.5px;
+	left: 36.4px;
+}
+.burn-yellow{
+	border-color: yellow;
+}
+.burn-red{
+	border-color: red;
+}
+.burn-green{
+	border-color: greenyellow;
+}
+.butn{
+	display: block;
+	position: absolute;
+	width: 7px;
+	height: 7px;
+	background: red;
+	padding: 0;
+	border: 1px solid black;
+	cursor: pointer;
+	top: 260px;
+	left: 521.5px;
+}
+.counter{
+	display: block;
+	position: absolute;
+	top:165px;
+	left:483px;
+	font-family: 'Squada One', cursive;
+	font-size: 20px;
+}

+ 23 - 0
Pavlov_hm14/inddex.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Pavlov_Maik_FSA3</title>
+	<link rel="stylesheet" href="css/clean.css">
+	<link rel="stylesheet" href="css/style.css">
+	<link href="https://fonts.googleapis.com/css2?family=Squada+One&display=swap" rel="stylesheet">
+</head>
+<body>
+		<div class="traff-lighter">
+			<i class="traff"></i>
+			<i class="red pos"></i>
+			<i class="yellow pos" ></i>
+			<i class="green pos"></i>
+		</div>
+	   <div class="btn">
+			<button class="butn"></button>
+			<div class="counter"></div>
+		</div>
+	<script src="script/script.js"></script>
+</body>
+</html>

+ 101 - 0
Pavlov_hm14/script/script.js

@@ -0,0 +1,101 @@
+let red = document.querySelector('.red'),
+	yellow = document.querySelector('.yellow'),
+	green = document.querySelector('.green'),
+	btn = document.querySelector('.butn'),
+	counter = document.querySelector('.counter');
+
+let shwCounts,timerss,startTime = true;
+
+const doo=ms=>new Promise(ok=>setTimeout(()=> ok(ms),ms));
+				
+let low = ms => new Promise(function(res){
+    btn.onclick = () => {
+		buttonClick();
+		clearTimeout(timerss);
+	}
+	timerss=setTimeout(()=>res(),ms);
+	function buttonClick(){
+		setTimeout(() => res(),4000);
+	};
+});
+
+let redTimer = 6000,
+    yellowTimer = 2000,
+    greenTimer = 8000;
+						
+async function trafficLight(){
+	while (true){
+		shw(parseInt(redTimer));
+		yellow.classList.remove('burn-yellow');
+		red.classList.add('burn-red');
+		await doo(redTimer);
+		
+		shw(parseInt(yellowTimer));
+		red.classList.remove('burn-red');
+		yellow.classList.add('burn-yellow');
+		await doo(yellowTimer);
+		
+		shw(parseInt(greenTimer));
+		yellow.classList.remove('burn-yellow');
+		green.classList.add('burn-green');
+		await Promise.race([doo(greenTimer),low(greenTimer+1000)]);
+		
+		clearTimeout(shwCounts);
+		counter.innerText = parseInt(yellowTimer/1000);
+		
+		shw(parseInt(yellowTimer));
+		green.classList.remove('burn-green');
+		yellow.classList.add('burn-yellow');
+		await doo(yellowTimer);
+	};
+};
+trafficLight();
+
+function shw(time) {
+    if (startTime){
+        counter.innerText = time/1000;
+        startTime = false
+    }
+    time -= 1000;
+    if (time ==  0){
+        startTime = true;
+        return;
+    }
+    shwCounts = setTimeout(()=>{
+        counter.innerText = time/1000;
+        shw(time);
+    },1000);   
+}
+
+async function speedTest(promis,cnt=1,paraller=1){
+	let prll = paraller, obj = {}, fdr = 0;;
+	function prllStart(){
+		if (paraller === 1){
+			paraller = prll;
+			return(promis());
+		}else{
+			paraller--;
+			prllStart();
+			return(promis());
+		}
+	}
+	let run = performance.now();
+	for (let i=0; i<cnt ; i++){
+		let a = performance.now();
+		await Promise.all([prllStart()]);
+		fdr += performance.now() - a;
+	}
+	obj.summParaller = paraller + ' пралельных процессов'
+	obj.lasting = performance.now() - run; 
+	obj.parallerLasting = fdr / cnt;
+	obj.parallerSpeed = paraller / (obj.parallerLasting);
+	obj.durationLasting = parseInt(obj.parallerLasting) + 'ms'
+	obj.requestSpeed='нет отличия'
+	return obj;
+}
+
+speedTest(()=>doo(1000),10,100).then(result=>console.log(result));
+speedTest(()=>fetch('http://swapi.dev/api/people/1').then(res=>res.json()),10,5).then(result=>console.log(result));
+
+
+

BIN
Pavlov_hm14/traff-lighter.png