




版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
第HTML+CSS+JS實現(xiàn)的簡單應用小案例分享目錄1.猜數(shù)字2.表白墻3.切換日夜間模式4.待辦事項
1.猜數(shù)字
!DOCTYPEhtml
htmllang="en"
head
metacharset="UTF-8"
metahttp-equiv="X-UA-Compatible"content="IE=edge"
metaname="viewport"content="width=device-width,initial-scale=1.0"
title猜數(shù)字游戲/title
/head
body
inputtype="button"id="reset"value="重新開始一局游戲"
div
span請輸入要猜的數(shù)字:/span
inputtype="text"id="num"
inputtype="button"value="猜"id="guess"
/div
div
span已經猜的次數(shù):/span
spanid="count"0/span
/div
div
span猜的結果:/span
spanid="result"/span
/div
script
//先獲取要用到的JS的DOM對象
letresetButton=document.querySelector("#reset")/*參數(shù)時選擇器,所以要通過特殊符號指定是哪種選擇器*/
letnumInput=document.querySelector('#num');
letguessButton=document.querySelector('#guess');
letcountSpan=document.querySelector('#count');
letresultSpan=document.querySelector('#result');
//生成一個1~100之間的隨機整數(shù)
lettoGuess=Math.floor(Math.random()*100)+1;
letcount=0;
console.log("toGuess:"+toGuess);
guessButton.onclick=function(){
//用戶點擊[猜]這個按鈕,首先先更新點擊次數(shù)的顯示.
count++;
countSpan.innerHTML=count;
//讀取到輸入框的內容,進行判定
/*parseInt()函數(shù)解析字符串并返回整數(shù)*/
letnum=parseInt(numInput.value);
console.log("num:"+num);
if(numtoGuess){
resultSpan.innerHTML='猜低了';
resultSpan.style.color='red';
}elseif(numtoGuess){
resultSpan.innerHTML='猜高了';
resultSpan.style.color='green';
}else{
resultSpan.innerHTML='猜對了';
resultSpan.style.color='orange';
resetButton.onclick=function(){
//把toGuess和count清空,同時重新生成一個隨機的整數(shù)
toGuess=Math.floor(Math.random()*100)+1;
count=0;
resultSpan.innerHTML='';
countSpan.innerHTML='';
numInput.value='';
/script
/body
/html
2.表白墻
!DOCTYPEhtml
htmllang="en"
head
metacharset="UTF-8"
metahttp-equiv="X-UA-Compatible"content="IE=edge"
metaname="viewport"content="width=device-width,initial-scale=1.0"
titlemessageWall/title
/head
body
style
margin:0;
padding:0;
.container{
width:100%;
height:100%;
text-align:center;
padding:20px0;
font-size:15px;
color:grey;
padding:10px0;
text-align:center;
.row{
display:flex;
height:50px;
justify-content:center;
align-items:center;
.rowspan{
width:100px;
.row.edit{
width:200px;
height:36px;
.row.submit{
width:300px;
height:30px;
background-color:orange;
color:#fff;
border:none;/*去掉按鈕邊框*/
.row.submit:active{
background-color:grey;
/style
div
h1表白墻/h1
p輸入后點擊提交,將會把消息顯示在墻上/p
div
span誰:/span
inputtype="text"
/div
div
span對誰:/span
inputtype="text"
/div
div
span說什么:/span
inputtype="text"
/div
div
inputtype="button"value="提交"
/div
/div
script
letsubmitButton=document.querySelector('.submit');
submitButton.onclick=function(){
//1.獲取到輸入框里面的內容
letedits=document.querySelectorAll('.edit');
letfrom=edits[0].value;
letto=edits[1].value;
letmessage=edits[2].value;
console.log(from+","+to+","+message);
if(from==''||to==''||message==''){
return;
//2.創(chuàng)建一個新的元素節(jié)點,即獲取到的輸入框信息
//將其添加到DOM樹中
letrow=document.createElement('div');/*創(chuàng)建出新的idv節(jié)點*/
row.className='row';/*設置屬性名*/
row.innerHTML=from+'對'+to+'說:'+message;
letcontainer=document.querySelector('.container');
container.appendChild(row);
//3.把上次輸入的內容清空
for(leti=0;iedits.length;i++){
edits[i].value='';
/script
/body
/html
3.切換日夜間模式
!DOCTYPEhtml
htmllang="en"
head
metacharset="UTF-8"
metahttp-equiv="X-UA-Compatible"content="IE=edge"
metaname="viewport"content="width=device-width,initial-scale=1.0"
title切換日夜間模式/title
/head
body
style
/*清除瀏覽器默認格式*/
margin:0;
padding:0;
html,body{
width:100%;
height:100%;
.light{
background-color:#fff;
color:#000;
font-size:40px;;
.dark{
background-color:#666;
color:#eee;
font-size:40px;;
/style
div
代碼案例:切換日夜間模式;
/div
script
/*獲取元素*/
letdiv=document.querySelector('div');
div.onclick=function(){
console.log(div.className);/*獲取屬性值:content*/
if(div.className.indexOf('light')!=-1){
div.className='dark';
}else{
div.className='light';
/script
/body
/html
4.待辦事項
!DOCTYPEhtml
htmllang="en"
head
metacharset="UTF-8"
metahttp-equiv="X-UA-Compatible"content="IE=edge"
metaname="viewport"content="width=device-width,initial-scale=1.0"
titletodoList/title
/head
body
style
padding:0;
margin:0;
box-sizing:border-box;
.nav{
width:600px;
margin:0auto;
display:flex;
justify-content:center;
align-items:center;
.navinput{
width:450px;
height:50px;
font-size:25px;
padding-left:10px;
.navbutton{
width:150px;
height:50px;
border:none;
color:white;
background-color:orange;
font-size:18px;
.navbutton:active{
background-color:grey;
.container{
width:600px;
margin:0auto;
display:flex;
justify-content:center;
/*padding-top:10px;*/
margin-top:10px;
/*background-color:green;*/
.container.left,
.container.right{
width:50%;
.container.lefth3,
.container.righth3{
text-align:center;
height:50px;
line-height:50px;
background-color:black;
color:white;
.container.row{
height:50px;
display:flex;
align-items:center;
justify-content:flex-start;
.container.rowspan{
width:240px;
.container.rowbutton{
width:40px;
height:30px;
.container.rowinput{
margin-right:5px;
/style
!--表示上方的div,里面放輸入框和按鈕--
div
inputtype="text"
button新建任務/button
/div
!--這個是下方的div,里面分成左右兩欄--
div
div
h3未完成/h3
!--div
inputtype="checkbox"
span吃飯/span
button刪除/button
/div--
/div
div
h3已完成/h3
/div
/div
script
letaddTaskBtn=document.querySelector(".navbutton");
addTaskBtn.onclick=function(){
//1.獲取到輸入框的內容
letinput=document.querySelector(".navinput");
lettaskContent=input.value;
//2.創(chuàng)建一個div.row,里面設置上需要的復選框,文本,刪除按鈕
letrow=document.createElement('div');
row.className='row';
letcheckBox=document.createElement('input');
checkBox.type='checkbox';
letspan=document.createElement('span');
span.innerHTML=taskContent;
letdeleteBtn=document.createElement('button');
deleteBtn.innerHTML='刪除';
row.appendChild(checkBox);
row.appe
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 外籍人員用餐管理辦法
- 維修質量風險管理辦法
- 電廠燃料采購管理辦法
- 后勤職工培訓課件
- 肝膿腫護理課件下載
- 肝臟生理功能課件中醫(yī)
- 福州八上期中數(shù)學試卷
- 肝病用藥護理課件
- 肝病心理護理課件下載
- 高中學考往年數(shù)學試卷
- 2022年浙江紹興市新聞傳媒中心招聘工作人員筆試備考題庫及答案解析
- 施工現(xiàn)場臨時用電驗收表參考模板范本
- 煤礦門益門區(qū)益門
- 八年級語文課外文言文閱讀 專項訓練
- 國際貿易出口業(yè)務一般流程
- 2023年物流公司介紹PPT
- 2023山西高考志愿填報指南(詳細)
- GB/T 8431-1998紡織品色牢度試驗光致變色的檢驗和評定
- GB/T 19889.5-2006聲學建筑和建筑構件隔聲測量第5部分:外墻構件和外墻空氣聲隔聲的現(xiàn)場測量
- GB/T 18391.1-2009信息技術元數(shù)據注冊系統(tǒng)(MDR)第1部分:框架
- GB/T 1048-2019管道元件公稱壓力的定義和選用
評論
0/150
提交評論