Trang chủ Khám phá Trợ giúp
Đăng nhập
pvvvm505
/
JavaScript
Xem 1
Star 0
Fork 0
Các tập tin Các vấn đề 7 Yêu cầu khéo về 0 Wiki
Browse Source

done

pavlovm503 4 năm trước cách đây
mục cha
6732541172
commit
5fc3309bef
10 tập tin đã thay đổi với 428 bổ sung và 0 xóa
Split View Hiển thị tình trạng sai khác
  1. 43 0
      Pavlov_hm13/css/clean.css
  2. 47 0
      Pavlov_hm13/css/style.css
  3. 24 0
      Pavlov_hm13/inddex.html
  4. 82 0
      Pavlov_hm13/script/script.js
  5. BIN
      Pavlov_hm14/bg.png
  6. 43 0
      Pavlov_hm14/css/clean.css
  7. 65 0
      Pavlov_hm14/css/style.css
  8. 23 0
      Pavlov_hm14/inddex.html
  9. 101 0
      Pavlov_hm14/script/script.js
  10. BIN
      Pavlov_hm14/traff-lighter.png

+ 43 - 0
Pavlov_hm13/css/clean.css
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin


+ 43 - 0
Pavlov_hm14/css/clean.css
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin