亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 70
粉絲 4
評(píng)論 5
訪問量 122302
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JavaScript:留言板添加字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)與禁止超出功能,部分字符串和數(shù)組方法功能使用
JiaJieChen
原創(chuàng)
1341人瀏覽過

留言板添加字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)與禁止超出功能,部分字符串和數(shù)組方法功能使用

1.字符串方法

方法 含義
concat() 字符串拼裝
slice（） 取子串，可以正負(fù)數(shù)取數(shù)
trim() 刪除字符串兩邊的空白字符
split（） 將字符打散成數(shù)組

①concat字符串拼裝

②slice取子串

③trim刪除空白字符

可以看到空格也算一個(gè)字符串，我們用trim方法刪除/過濾掉空白字符串看看長度

可以看到trim過濾掉了空白字符串，只剩下兩個(gè)實(shí)體字符串了

④split將字符打散成數(shù)組


可以看到用split 傳入了@ 把字符串隔開成了兩個(gè)數(shù)組

2.數(shù)組方法

方法 含義
push() 尾部添加，入棧
pop() 尾部刪除，出棧
unsift（） 在數(shù)組頭部添加
shift（） 在數(shù)組頭部刪除
join() 將數(shù)組轉(zhuǎn)為字符串
filter（） 對(duì)每個(gè)成員應(yīng)用回調(diào)函數(shù)進(jìn)行處理返回true的成員
reduce（） 歸納操作，將多個(gè)成員進(jìn)行統(tǒng)計(jì)后單值返回

①push尾部添加，入棧

②pop尾部刪除，出棧

3.留言板添加數(shù)字實(shí)時(shí)統(tǒng)計(jì)與禁止超出功能


留言板添加數(shù)字實(shí)時(shí)統(tǒng)計(jì)用的是oninput方法只要值發(fā)生變化時(shí)連續(xù)觸發(fā),不等失去焦點(diǎn)，限制長度用的是maxlength屬性限制到100.

css代碼塊

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   background: lightseagreen;
  9. }
  11. /* from 表單請(qǐng)留言 */
  12. .comment {
  13.   margin: 40px auto;
  14.   display: grid;
  15.   grid-template-columns: 1fr;
  16.   grid-template-rows: 40px 1fr;
  17.   place-items: center;
  18.   gap: 5px;
  19. }
  20. .comment > label {
  21.   color: white;
  22.   font-size: 20px;
  23. }
  25. /*--------------------------*/
  27. /*留言文本框*/
  28. .comment > #content {
  29.   width: 40em;
  30.   border-radius: 0.5em;
  31. }
  32. #content:hover {
  33.   box-shadow: lightcyan 0 0 1em;
  34.   transition: 0.6s;
  35. }
  36. /*----------------------------*/
  38. /* 提交按鈕樣式*/
  39. .comment > .submit {
  40.   width: 10rem;
  41.   height: 2rem;
  42.   background: lightcyan;
  43.   border: none;
  44.   cursor: pointer;
  45. }
  47. .comment > .submit:hover {
  48.   box-shadow: 0 0 1em;
  49. }
  50. /* ---------------------------- */
  52. /*留言框樣式*/
  53. .list {
  54.   width: 40em;
  55.   height: 30em;
  56.   margin: 0px auto;
  57.   background: white;
  58.   font-style: normal;
  59.   border-radius: 1em;
  60. }
  62. .list:hover {
  63.   box-shadow: lightcyan 0 0 1em;
  64.   transition: 0.6s;
  65. }
  66. .list > ul {
  67.   padding: 1rem;
  68.   background: none;
  69.   box-shadow: none;
  70. }
  71. .list > ul:hover {
  72.   box-shadow: none;
  73. }
  75. /* 提示*/
  76. .tishi {
  77.   color: white;
  78.   margin-top: 5px;
  79. }

html代碼塊

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>留言板</title>
  8.     <style>
  9.       @import url(comment.css);
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <form action="" class="comment">
  14.       <label for="content">請(qǐng)留言:</label>
  15.       <textarea
  16.         name="content"
  17.         id="content"
  18.         cols="30"
  19.         rows="10"
  20.         maxlength="100"
  21.         placeholder="請(qǐng)留言不要超過100個(gè)字"
  22.       ></textarea>
  23.       <div class="tishi"></div>
  24.       <span class="tishi"></span>
  25.       <button class="submit" type="button" name="submit">提交</button>
  26.     </form>
  27.     <fieldset class="list">
  28.       <legend style="font-weight: bolder; font-size: 1.3em">留言框</legend>
  29.       <ul class="listm"></ul>
  31.       <script>
  32.         //留言板功能實(shí)現(xiàn)綁定在留言框
  33.         //第一步拿到html里面的表單元素
  34.         //拿到form表單
  35.         const comment = document.querySelector(".comment");
  36.         //拿到文本輸入框
  37.         const content = comment.content;
  38.         //拿到提交按鈕
  39.         const submitBtn = comment.submit;
  40.         //拿到列表項(xiàng)
  41.         const Slistm = document.querySelector(".listm");
  42.         //拿到提示項(xiàng)
  43.         const tishi = document.querySelector(".tishi");
  45.         //文本提示事件
  46.         content.oninput = function () {
  47.           if (content.value.length > 0 && content.value.length <= 100) {
  48.             tishi.innerHTML = `您還可以輸入${
  49.               100 - this.value.trim().length
  50.             }個(gè)字符`;
  52.             tishi.style.maxlength = "100";
  53.           } else {
  54.             content.oninput = function () {
  55.               tishi.innerHTML = `您還可以輸入${
  56.                 100 - this.value.trim().length
  57.               }個(gè)字符`;
  58.             };
  59.           }
  60.         };
  62.         //提交按鈕事件觸發(fā)綁定
  63.         submitBtn.onclick = (ev) => {
  64.           // trim()發(fā)方法是過濾空格
  65.           //創(chuàng)建一個(gè)value變量，并且這個(gè)變量拿到輸入文本框里的文字和過濾空格
  66.           let value = content.value.trim();
  68.           //做一個(gè)判斷，判斷文本款里的內(nèi)容是否 > 0 或 <=100 個(gè)文字
  69.           if (value.length > 0 && value.length <= 100) {
  70.             //如果正確就鑲嵌到列表中
  71.             //首先創(chuàng)建li列表，然后拿到value的文字
  72.             const newComment = document.createElement("li");
  73.             //添加li的樣式
  74.             newComment.style.listStyle = "none";
  75.             newComment.style.borderBottom = "1px solid ";
  76.             newComment.style.height = "2em";
  77.             newComment.style.margin = "5px";
  78.             newComment.textContent = value;
  80.             //添加刪除按鈕功能
  81.             const deletBtn = document.createElement("button");
  82.             deletBtn.textContent = "刪除";
  83.             deletBtn.style.width = "3rem";
  84.             deletBtn.style.height = "1.2rem";
  85.             deletBtn.style.cursor = "pointer";
  86.             deletBtn.style.background = "cyan";
  87.             deletBtn.style.border = "none";
  88.             deletBtn.style.float = "right";
  90.             //添加刪除按鈕事件
  91.             deletBtn.onclick = function () {
  92.               // confirm（） 是個(gè)詢問彈窗，里面有確定和取消
  93.               if (confirm("是否刪除")) {
  94.                 //確定是 true 取消是false
  95.                 //當(dāng)前刪除按鈕的父節(jié)點(diǎn)是li，所以刪除父節(jié)點(diǎn)就可以刪除留言了
  96.                 this.parentNode.remove();
  97.                 //刪除要通知客戶
  98.                 alert("刪除成功");
  99.                 //設(shè)置焦點(diǎn)
  100.                 content.focus();
  101.                 return false;
  102.               }
  103.             };
  105.             //將刪除功能添加到新留言后面
  106.             newComment.append(deletBtn);
  108.             //將新留言添加到留言框中
  109.             Slistm.prepend(newComment);
  110.             content.value = null;
  111.             //并且通知客戶添加成功
  112.             alert("提交成功");
  113.             //設(shè)置焦點(diǎn)
  114.             content.focus();
  115.           } else {
  116.             //如果不正確就彈出窗口
  117.             alert("沒有內(nèi)容或內(nèi)容超出規(guī)定長度");
  118.             //設(shè)置焦點(diǎn)
  119.             content.focus();
  120.             //跳出判斷
  121.             return false;
  122.           }
  123.         };
  124.       </script>
  125.     </fieldset>
  126.   </body>
  127. </html>
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：看來你是老同學(xué)了, 加油
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)