https://virgool.ir/feed/@mmdhasnbabaeifa2026-11-11 09:30:07https://files.virgool.ir/upload/users/1862743/avatar/PMB4tT.jpghttps://virgool.ir/@mmdhasnbabaeihttps://virgool.ir/@mmdhasnbabaei/چگونه-با-جاوااسکریپت-ساعت-بسازیم-afxo6mhaq1ntتصویر ساعتقرار با کمک html و css و javascript یه همچین چیزی بسازیم که در واقع دوتا ساعته یکیش آنالوگ و دیگری دیجیتالهhtml <!-- // digital clock --> <h1 id="clock"> <span id="hourespan"></span>: <span id="minutespan"></span>: <span id="secondspan"></span> </h1> <!-- // analog clock --> <div class="conten"> <p class="one"></p> <p class="two"></p> <p class="three"></p> <p class="four"></p> <p class="five"></p> <p class="six"></p> <div class="subcont"> <p class="firsthand"></p> <p class="secondhand"></p> <p class="thirdhand"></p> <p class="center-nail"></p> </div> </div> css *{ background-color: black; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } h1{ text-align: center; margin-left: auto; margin-right: auto; color: aqua; margin-top: 35px; border: 2px red solid; width: 41%; box-shadow: 0px 0px 5px 3px; } *{ margin: 0; padding: 0; box-sizing: border-box; } .conten{ background-color: rgb(0 0 0); height: 200px; border-radius: 50%; width: 200px; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; box-shadow: 0px -1px 6px 0px #e7e7e7; } .one{ background-color: aqua; height: 41px; position: absolute; width: 200px; height: 2px; top: 99px; } .two{ background-color: aqua; height: 41px; position: absolute; width: 200px; height: 2px; top: 99px; left: 1px; transform: rotateZ(90deg); } .three,.four,.five,.six{ height: 41px; position: absolute; width: 200px; height: 2px; top: 99px; left: 1px; background-color: rgb(218, 192, 41); } .three{ transform: rotateZ(117deg); } .four{ transform: rotateZ(150deg); } .five{ transform: rotateZ(213deg); } .six{ transform: rotateZ(244deg); } .subcont{ position: absolute; width: 178px; height: 167px; top: 19px; left: 12px; background-color: rgb(0 0 0); border-radius: 50%; } .firsthand{ position: absolute; width: 85px; height: 2px; top: 75px; left: 86px; background-color: rgb(214, 12, 1); transform-origin: 0px bottom; } .secondhand{ position: absolute; width: 60px; height: 2px; top: 75px; left: 86px; background-color: rgb(41 218 87); transform-origin: 0px bottom; } .thirdhand{ position: absolute; width: 54px; height: 4px; top: 75px; left: 86px; background-color: rgb(41 63 218); transform: rotate(106deg); transform-origin: 0px bottom; } .center-nail{ position: absolute; width: 18px; height: 19px; top: 70px; left: 79px; background-color: rgb(5 10 7 / 99%); border-radius: 50%; box-shadow: inset 0px 0px 1px wheat; } js setInterval(callme,10) function callme(){ let date=new Date let second=date.getSeconds() let minute=date.getMinutes() let houre=date.getHours() const hourespan=document.getElementById("hourespan") const minutespan=document.getElementById("minutespan") const secondspan=document.getElementById("secondspan") const helment=document.getElementById("clock") second= second<9 ? "0"+second:second // minute= minute<9 ? "0"+minute:minute // houre= houre<9 ? "0"+houre:houre let amorpm=houre<12 ?"am":"pm" helment=`${houre}: ${minute}: <span id="seccss"> ${second} </span> ${amorpm}` } const firsthand=document.querySelector(".firsthand") const secondhand=document.querySelector(".secondhand") const thirdhand=document.querySelector(".thirdhand") let first_hand_degree=6 let second_hand_degree=6 let third_hand_degree=6 setInterval(spinhand,1000); function spinhand(){ if(first_hand_degree<=360){ firsthand.style.transform = `rotate(${first_hand_degree}deg)`; first_hand_degree=first_hand_degree+6 }else if(first_hand_degree>360){ first_hand_degree=100 secondhand.style.transform = `rotate(${second_hand_degree}deg)`; second_hand_degree=second_hand_degree+6 } if(second_hand_degree>360){ const thirdhand=document.querySelector(".thirdhand") second_hand_degree=6 thirdhand.style.transform =`rotate(${third_hand_degree}deg)`; third_hand_degree+=6 } if(third_hand_degree>360){ third_hand_degree=6 } }لینک فایل ها https://github.com/mamadhasn/ANALOG-DIGITAL-CLOCK-WITH-JAVASCRIPT ممدحسنممدحسنSat, 19 Nov 2022 16:28:13 +0330https://virgool.ir/@mmdhasnbabaei/چگونه-با-جاوا-اسکریپت-بازی-حدس-عدد-بسازیم-yirzadiehadtاولین تصویرخوب عکس بالا شکل بازی ماستوقتی حدس غلط می زنیم شکل بالا رو داریمو وقتی هم درست حدس می زنیم این شکل رو داریم و امتیازات هم چه مثبت و چه منفی که بر اساس حدس درست و غلط داده میشه ثپت میشهhtml <div class="conteaner"> <h1>GUESS NUMBER</h1> <label>Tell me your number, between 1 to 9</label> <br> <div class="subcon"> <span id="negetive">-</span> <input type="text" id="mynumber" placeholder="enter your number"> <span id="positive">+</span> <br> </div> <div class="seocnsubcon"> <h3>click me to check your guess</h3> <br> <button id="submit">click</button> <button id="retry">↻</button> </div> </div> <div id="textcompar" style="text-align:center;"> </div> css .conteaner{ margin-left: auto; margin-right: auto; text-align: center; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: center; } h1{ background-color: black; color: antiquewhite; } label{ background-color: rgb(200, 215, 33); line-height: 41px; font-size: 27px; box-shadow: 0px 2px 3px; } span{ color: rgb(0, 0, 0); } #negetive{ background-color: red; padding: 23px; border-radius: 50%; } #positive{ background-color: green; padding: 23px; border-radius: 50%; } button{ padding: 15px; background-color: black; border-radius: 31%; box-shadow: 1px 1px 3px; color: wheat; } input{ padding: 23px; text-align: center; font-size: larger; } .subcon,.seocnsubcon{ margin-top: 12px; } #textcompar{ font-size: 23px; margin: 20px; } #numone{ background-color: aqua; padding: 16px; border-bottom: 7px solid red; border-radius: 36%; } #numonesecond{ background-color: rgb(242, 255, 0); padding: 16px; border-bottom: 7px solid red; border-radius: 36%; } #rote{ background-color: aqua; padding: 16px; border-bottom: 7px solid red; border-radius: 36%; } #retry{ background-color: black; color: balack; font-size: 21px; border-radius: 50%; }js const submit=document.getElementById("submit") let negetive_scover=1 let posiotive_scover=1 submit.addEventListener("click",e=>{ const generatnumber=Math.floor(Math.random()*10) const mynumber=document.getElementById("mynumber").value const error=document.getElementById("mynumber") error.value="" if( negetive_scover>7){ alert("you lose") } if(mynumber>=0 && mynumber<=9){ if(generatnumber==mynumber){ document.getElementById("textcompar")=` your number is <span id="rote">${mynumber}</span> and mine is <span id="rote"> ${generatnumber} :)<span>` const positive=document.getElementById("positive") positive=posiotive_scover return posiotive_scover=posiotive_scover+1 console.log(mynumber); }else if(generatnumber!=mynumber){ document.getElementById("textcompar")=` your number is <span id="numone">${mynumber}</span> and mine is <span id="numonesecond"> ${generatnumber}:(</span>` const negetive=document.getElementById("negetive") negetive=negetive_scover return negetive_scover=negetive_scover+1 } }else{ alert("please enter number between 1 to 9") } const retry=document.getElementById("retry") retry.addEventListener("click",e=>{ const positive=document.getElementById("positive") const negetive=document.getElementById("negetive") const textcompar=document.getElementById("textcompar") positive="+" negetive="-" textcompar=""})لینک دانلود فایل کد ها https://github.com/mamadhasn/GUESS-NUMBER-game-with-javascript ممدحسنممدحسنThu, 17 Nov 2022 15:18:25 +0330https://virgool.ir/@mmdhasnbabaei/چگونه-با-جاوااسکریپتgenerate-randome-quote-بسازیم-yaa8njitvl3yیه همچین چیزی که با زدن رکمه جنریت برامون گوت درست کنهhtml <div id="conteaner"> <h1> GENERATE RANDOM QUOTE </h1> <button id="generate">Generate quote</button> <div id="textplace"></div> </div> css h1{ background-color: #33d30b; box-shadow: inset -1px -3px 3px; border-radius: 4px; } #conteaner{ display: flex; flex-direction: column; align-content: space-around; align-items: center; justify-content: center; } #generate{ background-color: aqua; padding: 17px; font-size:x-large ; border: none; box-shadow: inset -3px -2px 3px; border-radius: 11px; } #textplace{ background-color: #b79898; margin-top: 10px; text-align: center; font-size: 25px; box-shadow: inset -2px -3px 3px; font-size: x-large; display: flex; flex-direction: column; align-items: center; border-radius: 19px; } span{ background-color: #b79898; margin: -28px; padding: 6px; position: absolute; top: 64%; box-shadow: inset -1px -2px 3px; border-radius: 12px; } js const quotes=[ { id:1, quote:"The greatest glory in living lies not in never falling, but in rising every time we fall.", who:" -Nelson Mandela" }, { id:2, quote:"The way to get started is to quit talking and begin doing.", who:" -Walt Disney"}, {id:3, quote:"The future belongs to those who believe in the beauty of their dreams. ", who:" --Eleanor Roosevelt" },{ id:4, quote: "Spread love everywhere you go. Let no one ever come to you without leaving happier.", who:" -Mother Teresa" }, { id:5, quote:"I never dreamed about success, I worked for it." , who:" -Estee Lauder" }, { id:6, quote:"Success seems to be connected with action. Successful people keep moving. They make mistakes but they don't quit." , who:" -Conrad Hilton" }, { id:7, quote: "There are no secrets to success. It is the result of preparation, hard work, and learning from failure.", who:" -Colin Powell" }, ] const generate=document.getElementById("generate") generate.addEventListener("click",e=>{ const random=Math.floor(Math.random()*7)+1 const textplace=document.getElementById("textplace") textplace.style.padding="79px" const filterbyrandom= quotes.filter((w)=>{ return w.id==random }) filterbyrandom.forEach(e => { const textplace=document.getElementById("textplace") textplace=`"${e.quote}"<br> <span>${e.who}</span>` }); })لینک دانلود فایل کد ها https://github.com/mamadhasn/GENERATE-RANDOM-QUOTE ممدحسنممدحسنThu, 17 Nov 2022 14:46:31 +0330https://virgool.ir/@mmdhasnbabaei/چگونه-با-جاوااسکریپت-ماشین-حساب-بسازیم-w0w53q41wihaعکس اولخوب شکل بالا ماشین حساب ما رو نشون میده که در عین سادگی تقریبا کنترول شده و بی عیب کار می کنه.عکس دومبریم به قسمت کد هاhtml <div class="conteaner"> <div id="shownumer"> <div id="sunelespans"> <span id="yek"></span> <span id="doo"></span> <span id="see"></span> </div> </div> <button id="plus">+</button> <button id="mines">-</button> <button id="multiple">x</button> <button id="division">/</button> <button id="clean">c</button> <button id="two">2</button> <button id="three">3</button> <button id="four">4</button> <button id="five">5</button> <button id="six">6</button> <button id="zero">0</button> <button id="one">1</button> <button id="seven">7</button> <button id="egiht">8</button> <button id="nine">9</button> <button id="equal">=</button> css *{ font-size: xx-large;} .conteaner{ width: 50%; height: 500px; display: grid; grid-template-columns: 50px 50px 50px 50px 50px; gap: 20px; grid-auto-rows: 100px; margin-right: auto; margin-left: auto; } #shownumer{ background-color: rgb(3, 225, 66); grid-column: 1 / -1; grid-row: 1; font-size: 60px; text-align: center; } span{ font-size: 50px; } button#equal{ background-color: rgb(247, 0, 0); grid-column: 1 / -1; grid-row: auto;} button:not(#equal){ border-radius: 50%; background-color: black; color: aliceblue; } #sunelespans{ text-align: center; } #plus{ background-color: #af1a1aa1!important } #mines{ background-color: rgb(18 130 219) !important; } #multiple{ background-color: rgb(63, 35, 173) !important; } #division{ background-color: rgb(156, 93, 157) !important; } #clean{ background-color: rgb(199, 122, 22) !important; } قسمت جاوااسکریپتیشjs const spanone=document.querySelector("#yek") const spanthree= document.querySelector("#see") const spancondition=document.querySelector("#doo") const one=document.getElementById("one") one.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(1) } else if(!spancondition.textContent==""){ spanthree.append(1) } }) const two=document.getElementById("two") two.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(2) } else if(!spancondition.textContent==""){ spanthree.append(2) } }) const three=document.getElementById("three") three.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(3) } else if(!spancondition.textContent==""){ spanthree.append(3) } }) const four=document.getElementById("four") four.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(4) } else if(!spancondition.textContent==""){ spanthree.append(4) } }) const five=document.getElementById("five") five.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(5) } else if(!spancondition.textContent==""){ spanthree.append(5) } }) const six=document.getElementById("six") six.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(6) } else if(!spancondition.textContent==""){ spanthree.append(6) } }) const seven=document.getElementById("seven") seven.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(7) } else if(!spancondition.textContent==""){ spanthree.append(7) } }) const eight=document.getElementById("egiht") eight.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(8) } else if(!spancondition.textContent==""){ spanthree.append(8) } }) const nine=document.getElementById("nine") nine.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(9) } else if(!spancondition.textContent==""){ spanthree.append(9) } }) const zero=document.getElementById("zero") zero.addEventListener("click",e=>{ if(spancondition.textContent==""){ yek.append(0) } else if(!spancondition.textContent==""){ spanthree.append(0) } }) const plus=document.querySelector("#plus") plus.addEventListener("click",e=>{ if(!spanone.textContent=="" && spancondition.textContent=="" ){ document.querySelector("#doo")=plus.textContent } else if(!spanone.textContent=="" && !spancondition.textContent=="" && !spanthree.textContent==""){ equall() document.querySelector("#doo")=plus.textContent } else if(!spanone.textContent=="" && !spancondition.textContent==""){ document.querySelector("#doo")=plus.textContent } }) const mines=document.querySelector("#mines") mines.addEventListener("click",e=>{ if(!spanone.textContent=="" && spancondition.textContent=="" ){ document.querySelector("#doo")=mines.textContent } else if(!spanone.textContent=="" && !spancondition.textContent=="" && !spanthree.textContent==""){ equall() document.querySelector("#doo")=mines.textContent }else if(!spanone.textContent=="" && !spancondition.textContent==""){ document.querySelector("#doo")=mines.textContent } }) const multiple=document.querySelector("#multiple") multiple.addEventListener("click",e=>{ if(!spanone.textContent=="" && spancondition.textContent=="" ){ document.querySelector("#doo")=multiple.textContent } else if(!spanone.textContent=="" && !spancondition.textContent=="" && !spanthree.textContent==""){ equall() document.querySelector("#doo")=multiple.textContent }else if(!spanone.textContent=="" && !spancondition.textContent==""){ document.querySelector("#doo")=multiple.textContent } }) const division=document.querySelector("#division") division.addEventListener("click",e=>{ if(!spanone.textContent=="" && spancondition.textContent=="" ){ document.querySelector("#doo")=division.textContent } else if(!spanone.textContent=="" && !spancondition.textContent=="" && !spanthree.textContent==""){ equall() document.querySelector("#doo")=division.textContent }else if(!spanone.textContent=="" && !spancondition.textContent==""){ document.querySelector("#doo")=division.textContent } }) function equall(){ const shownumer=document.querySelector("#shownumer") let firstvalue=document.querySelector("#yek") let firstvalueu=parseInt(firstvalue.textContent) const secondvalue=document.querySelector("#doo") let secondvalueu=secondvalue.textContent let thirdvalue=document.querySelector("#see") let thirdvalueu=parseInt(thirdvalue.textContent) switch(secondvalueu){ case "+" :firstvalue=firstvalueu+thirdvalueu , thirdvalue="",secondvalue="" break; case "-" :firstvalue=firstvalueu-thirdvalueu , thirdvalue="",secondvalue="" break; case "x" :firstvalue=firstvalueu*thirdvalueu , thirdvalue="",secondvalue="" break; case "/" :firstvalue=firstvalueu/thirdvalueu , thirdvalue="",secondvalue="" break; } } const equal=document.querySelector("#equal") equal.addEventListener("click",e=>{ equall()}) const clean=document.querySelector("#clean") clean.addEventListener("click",e=>{ let firstvalue=document.querySelector("#yek") const secondvalue=document.querySelector("#doo") let thirdvalue=document.querySelector("#see") firstvalue="" secondvalue="" thirdvalue="" }) https://github.com/mamadhasn/-calculator-with-js cccممدحسنممدحسنThu, 17 Nov 2022 01:30:54 +0330https://virgool.ir/@mmdhasnbabaei/ساختن-to-do-list-با-جاوا-اسکریپت-kl3mt1dh7zwvیه همچین چیزی قراره بسازیم که وقتی کار رو از لیست تیک می زنیم به شکل پائین نمایش داده بشه و آیکن حذف هم فعال بشه.html <div id="conteaner"> <input type="text" id="add-work" placeholder="NAME..."> <button id="btn">+ </button> </div> <div id="listcont"></div> قسمت csscss #conteaner,#listcont{ display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-end; justify-content: center; align-items: baseline; } #listcont{ display: flex; align-content: space-between; justify-content: space-evenly; flex-direction: column; align-items: baseline; } #add-work{ width: 60%; padding: 1rem; } button{ width: 10%; padding: 1rem; font-size: 14px; font-weight: 900; background-color: green; } span{ font-size: 30px;} #listcont p{ width: 100%; background-color: rgb(197 213 202); color: rgb(0, 0, 0); display: flex; align-content: space-around; justify-content: space-between } a{ background-color: #000000; color: aliceblue; font-size: 29px; border-radius: 102%; } span{ margin-right: auto; }قسمت جاوااسکریپتjs //'گرفتن المنت ها' const getvalue=document.getElementById("add-work") const btn=document.getElementById("btn") const listcont=document.getElementById("listcont") //چون اول باید المنت ساخته بشه و بعد ما بتونیم بگیریمش این یعنی ویژگی تک رشته ای // جاوااسکریپت که به //Asynchronous Javascript //معروفه و برای حل این مشکل می تونیم از //callback //promise //async await //استفاده کنیم function first( callback){ // ساختن المنت ها در جاوااسکریپت و اضافه کردن آن به دام btn.addEventListener("click",e=>{ const deletel=document.createElement("a") deletel.textContent='x' const elementp=document.createElement("p") const inpu=document.createElement("input") const tags=document.createElement("span") inpu.setAttribute("type","checkbox") elementp.append(inpu) elementp.append(tags) tags+=getvalue.value elementp.append( deletel) listcont.append(elementp) getvalue.value="" callback() }) } //تابع دوم که باید بعد تابع اول اجرا بشه و بتونه المنت های رو که میخواهیم رو بگیره function two(){ const taker=document.querySelectorAll('input[type=checkbox]') const span=document.querySelectorAll("span") const alla=document.querySelectorAll("a") // چون آرایه ای از المنت ها رامی گیریم به همین خاطر از فور ایچ //استفاده می کنیم taker.forEach(e=>{ e.addEventListener("change",e=>{ //دسترسی به والد وبرادر و خواهر المنت ها const feed=e.target.nextSibling const parentelem=e.target.parentElement const aelem=e.target.nextSibling.nextSibling if(e.target.checked){ aelem.style.background="#FF0000" aelem.style.borderColor="black" parentelem.style.background="#33333" feed.style.textDecoration="line-through" }else{ parentelem.style.background="" feed.style.color="" feed.style.textDecoration="" aelem.style.background="" console.log(e.target.checked); } }) }) alla.forEach(e=>{ e.addEventListener("click",e=>{ const checkfordelet=e.target.previousSibling.previousSibling if (checkfordelet.checked) { const e_target=e.target.parentElement e_target.remove() }else if(!checkfordelet.checked){ return false } }) }) } //در نهایت فراخوانی تابع اول با کال بک تابع دوم first(two)کد ها رو می تونید از لینک زیر دانلود کنید https://github.com/mamadhasn/TODOLIST ممدحسنممدحسنFri, 11 Nov 2022 15:31:14 +0330https://virgool.ir/@mmdhasnbabaei/اضافه-کردنانتخاب-کردن-و-حذف-کردن-با-جاوا-اسکریپت-x2awfn0uyobmADD,DELETE,SELECTقرار یه همچین چیزی بسازیمHTML <h1> ADD ,SELECT, DELETE </h1> <div id="contn"> <div class="subone"> <!-- creat two inputs to take product's name and price --> <label for="product">name:</label> <input type="text" id="product" placeholder="name of product"><br> <!-- //creat checkbox to add product existence --> <label for="price">price:</label> <input type="text" id="price" placeholder="price of product"> <input type="submit" id="submit"> <!-- empety conteaner for add element --> <div id="subconteaner"> </div> </div> <div id="secondsub"> <!-- //select all element to remove --> <label for="select-ALL_remove">SELECT ALL</label> <input type="checkbox" id="select-ALL_remove" name="select-ALL_remove"> <span>and</span> <label for="remove-all">remove all</label> <button id="remove-all">DELETE ALL</button> </div> CSS *{ box-sizing: border-box; } input[type="text"]{ padding: 9px; margin-top:13px; } input[type="search"]{ padding: 9px; margin-top:13px; width: 100%; margin-left: -68px; } input[type="submit"]{ padding: 9px; margcolor: aliceblue; in-top:13px; background-color: black; } #contn{ display: flex; align-content: space-between; justify-content: space-between; align-items: baseline; flex-direction: column-reverse; font-size: larger; } .subone{ flex:4 ; } .subtwo{ flex: 6; } #subconteaner{ background-color: rgb(255, 255, 255); } input[type="text"]{ border-radius: 20px; border: 3px solid navy; width: 300px; line-height: 2rem; font-size: 20px; } #remove-all{ color: wheat; padding: 12px; border-radius: 23px; background-color: black; } #remove-all:hover{ background-color: red; color: aliceblue; } #subconteaner button{ padding: 13px; background-color: #783f3f; color: aliceblue; margin-left: 12px; border-radius: 50%; box-shadow: 0px 0px 10px 0px #563c3c; border: none; } #subconteaner button:hover{ background-color: red; color: azure; } h1{ text-align: center; background-color: coral; }js // مرحله اول گرفتن المنت ها const product=document.getElementById("product") const price=document.getElementById("price") const subconteaner=document.getElementById("subconteaner") const submit=document.getElementById("submit") const select_toremove=document.getElementById("select-ALL_remove") const remove_all_select=document.getElementById("remove-all") // تعریف آریه خالی برای پوش کردن ولیو ها let myarry=[]; // اد گردن ایونت لیسنر به باتن سابمیت برای پوش کردن submit.addEventListener("click",e=>{ myarry.push( { name:product.value, price:price.value, } ) // پیمایش آرایه و نمایش ولیو ها document.getElementById("subconteaner")="" myarry.forEach(e=>{ const elemnt=document.createElement("p") const span=document.createElement("button") const cheky=document.createElement("input") const linky=document.createElement("a") cheky.setAttribute("type","checkbox") span.textContent="x" linky.setAttribute("href","www.school.ir") elemnt.append(cheky) elemnt.append(linky) linky+=` ${e.name} is ${e.price}$ ` elemnt.append(span) document.getElementById("subconteaner").append(elemnt) // حذف المنمت ها span.addEventListener("click",e=>{ elemnt.remove() }) // حذف کلی المنت ها باسلکت اُل select_toremove.addEventListener("change",e=>{ if(e.target.checked){ cheky.checked=true }else{ cheky.checked=false } }) remove_all_select.addEventListener("click",e=>{ if(cheky.checked){ elemnt.remove() select_toremove.checked=false } }) }) product.value="" price.value="" })لینک فایل ها https://github.com/mamadhasn/ADD-SELECT-DELETE ممدحسنممدحسنThu, 03 Nov 2022 12:04:05 +0330https://virgool.ir/@mmdhasnbabaei/چگونه-با-جاوااسکریپت-یک-تایمر-بسازیم-kezuxquiijx4شکل تایمرقرار یک تایمر به شکل بالا بسازیم:اول فرض کنید معلم ورزش هستین و قرار از بچه ها امتحان دویدن بگیرین ، حالا با استفاده از تایمر بالا اسم هاشونو در کادر مینویسین بعد دکمه استارت رو میزنین ، بعد اتمام دویدن هر کدوم از دانش آموزا دکمه فینیش رو میزنین و سر آخر تایمشون رو با دکمه رکورد در قسمت پا ئین ثپت می کنین و در مرحله پایانی تایم رو ری ست می کنین و برا دانش آموز بعدی این کار رو انجام میدین.حالا که همه دویدن باید بتونیم سه نفر اول رو که تایمشون از بقیه بهتر رو پیدا کنیم خوب اینجا هم دکمه سورت رو می زنیم و تمام(خیلی راحت،آسون،بی دردسر و بی قلم و خودکار و .... :)داستان تموم شد بریم سراغ قسمت جالب قضیه :html <div id="cont"> <h1 id="go">00:00:00</h1> <div id="inpu"> <label for="esmesh">NAME OF RUNNER</label><br> <input type="text" id="esmesh" placeholder="enter runner name"><br> </div> <div id="btu"> <button id="start">start</button> <button id="finish">finish</button> <button id="register">record</button> <button id="reset">reset</button> </div> <button id="SORT">SORT RUNNER BY THEIR TIME</button> <div id="add"></div> </div>css .cont{ text-align: center; display: flex; flex-direction: column; } h1{ background-color:#07d30a ; display: block; font-size: 90px; } @media screen and (max-width: 480px) { body { background-color: lightgreen; } h1{ background-color:#07d30a ; display: block; font-size: 34px; }} #btu{ margin-top: 3rem; } button{ padding: 20px; background-color: black; color: aliceblue; border-radius: 12px; } span{ line-height: 12px; background-color: aqua; } label{ background-color: rgb(0 0 0); color: rgb(36 209 15); font-weight: bold; font-size: 30px; } input{ padding: 20px; } li{ list-style-type: auto; line-height: 35px; margin-top: 20px; background-color: #07d30a; }javascript //گرفتن المنت های مدنظر const esmesh=document.getElementById("esmesh") const start=document.getElementById("start") const register=document.getElementById("register") const finish=document.getElementById("finish") const reset=document.getElementById("reset") const hh=document.getElementById("go") const sort=document.getElementById("SORT") //تعریف آرایه خالی برای پوش کردن اسم و تایم دونده ها let all_Arry=[]; let mili=0; let sec=0; let min=0 let hor=0; let every; // استفاده از ایونت ها start.addEventListener("click",e=>{ every= setInterval(() => { timer(); }, 10); }) register.addEventListener("click",e=>{ const elem=document.createElement("li") elem.textContent=`${esmesh.value} time is${hor}:${min}:${sec}:${mili} ` document.getElementById("add").append(elem) all_Arry.push({ name:esmesh.value, time:parseInt(hor*24*60*60*1000+min*60*1000+sec*1000+mili) }) console.log(all_Arry); esmesh.value="" }) finish.addEventListener("click",e=>{ clearInterval(every) }) reset.addEventListener("click",e=>{ sec=0; min=0 hor=0; hh=`00:00:00` }) function timer(){ mili+=10; if(mili==1000){ sec++; sec=sec<10 ? "0"+sec:sec return mili=0 } if(sec===60){ min++; min=min<10 ? "0"+min:min return sec=0 } if(min===60){ hor++; hor=hor<10 ? "0"+hor:hor return min=0 } hh=`${hor}:${min}:${sec}:${mili}` } sort.addEventListener("click",e=>{ let sorted= all_Arry.sort((a,b)=>{ return b.time-a.time }) const dele=document.getElementById("add") dele.textContent="" sorted.forEach(e=>{ let ms = e.time let sanie= Math.floor((ms/1000/60) << 0) let dagig = Math.floor((ms/1000) % 60); const elem=document.createElement("li") elem.textContent=`${e.name} time is ${dagig}min and ${sanie}sec ` document.getElementById("add").append(elem) }) })فایل ها رو میتونید از لینک زیر دانلود کنید https://github.com/mamadhasn/RUNNER-TIMER در پست بعدی انشالله به طور کامل به توضیح کد ها می پردازم :)ممدحسنممدحسنSat, 29 Oct 2022 20:07:53 +0330