HTML+CSS+JS實現(xiàn)的簡單應用小案例分享

第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