js專案練習第二課
阿新 • • 發佈：2018-11-10
百度輸入法
<style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ text-decoration: none; } ul{ width: 60px; border: 1px solid #3A50AD; margin-top: 10px; } li{ width: 60px; height: 20px; text-align: center; } li:hover{ background-color: #2aabd2; } .close{ border-top: 1px solid #3A50AD; } .u1{ display: none; }</style> </head> <body> <button class="b1">輸入法</button> <span></span> <ul class="u1"> <li><a href="#">手寫</a></li> <li><a href="#">拼寫</a></li> <li class="close"><ahref="#">關閉</a></li> </ul> <script src="js/jquery-3.2.1.min.js"></script> <script> var $ulEle = $("ul"); $(".b1").on("click",function () { $ulEle.toggleClass("u1"); }) $(".close").on("click",function(){ $ulEle.addClass("u1"); }) $ulEle.children("li:not(.close)").on("click",function () { $("span").text($(this).children("a").text()); }) </script>
點選div顯示其內容
<style> .d1{ width: 500px; margin: 0 auto; } p{ width: 400px; height: 80px; border: 2px solid #eee; padding:5px; margin: 10px auto; font-size: 11px; text-indent: 2em; } </style> </head> <body> <div class="d1"> <p><strong>新華網</strong>北京5月29日電(新華社記者)從三聚氰胺到瘦肉精，從染色饅頭到毒豆芽，在食品中新增非食用物質和濫用食品新增劑已成為百姓餐桌上突出的"不安全因素"。近期以來，從北京到廣東，從浙江到寧夏，一場打擊食品非法新增的"風暴"席捲全國。 </p> <p> 4月21日，國務院部署嚴厲打擊食品非法新增和濫用食品新增劑專項行動後，廣東省高度重視，隨即召開了全省電視電話會議。省委領導強調，食品安全是"高壓線"，決不能"下不為例"；抓好食品安全要突出一個"<strong>嚴</strong>"字，做到<strong>嚴防</strong>、<strong>嚴查</strong>、<strong>嚴處</strong>。 </p> <p> <strong>寧夏重點開展了四輪問題乳粉徹查清繳工作</strong>，對全區養殖源頭、鮮奶收購和乳製品生產、經營、餐飲等環節的2.7萬家單位進行了全面清查，共查處問題乳粉案件4起、涉案企業3家，吊銷2家乳粉生產企業生產許可證。 </p> <p> 做好風險監測工作是許多地方加強食品安全的重點工作之一。在北京，<strong style="color:red;">全市設立了3000個風險監測點</strong>，建立了包括3000餘種食品新增劑和非法新增物的資料庫，對110家國內外食品相關組織、媒體釋出的線索進行監測，及時進行風險評估，加強抽檢控制。 </p> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $("p").on("click",function () { var text = $(this).text(); alert(text); }) </script>
求出陣列中所有數字的和
<style> *{ margin: 10px; } input{ width: 260px; margin: 15px auto; } span{ font-size: 12px; color: #5e5e5e; } </style> </head> <body> <input type="text"><span>輸入數字求和,數字之間用半形","號分隔</span> <p> <button>求和</button> </p> <h3></h3> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $("button").on("click",function () { console.log($("input").val()); $.each($("input").val(),function(i){ i += i; console.log(i); $("h3").text(i); }) }) </script>