HTML5中把一首古詩變大縮小和變顏色並用資料儲存起來
阿新 • • 發佈：2019-01-07
效果圖如下：
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放大縮小變顏色</title> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> <link rel="stylesheet" href="css/bootstrap.css" /> <style> *{ margin: 0px; padding: 0px; } p{ font-family: cursive; } </style> </head> <body> <div class="container"> <div class="book"> <p>床前明月光，</p> <p>疑是地上霜。</p> <p>舉頭望明月，</p> <p>低頭思故鄉。</p> </div> <div> <button class="btn-big">放大</button> <button class="btn-small">縮小</button> <button class="btn btn-red">紅色</button> <button class="btn btn-green">綠色</button> <button class="btn btn-yellow">黃色</button> </div> </div> <script> var num = localStorage.getItem("oBig")||16 $(".book").css("font-size",num+"px") $(".btn-big").click(function(){ num++ if(num>20){ num = 20 localStorage.setItem("oBig",num) return } $(".book").css("font-size",num+"px") localStorage.setItem("oBig",num) }) $(".btn-small").click(function(){ num-- if(num<12){ num = 12 localStorage.setItem("oBig",num) } $(".book").css("font-size",num+"px") localStorage.setItem("oBig",num) }) $(".btn").click(function(){ }) $(".btn-red").click(function(){ $(".book").css("color","red") }) $(".btn-green").click(function(){ $(".book").css("color","green") }) $(".btn-yellow").click(function(){ $(".book").css("color","yellow") }) </script> </body> </html>
謝謝----