留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{
        background-color: skyblue;
    }
    .comment{
        min-width:80%;
        min-height: 80%;
        border:1px solid #ccc;
    }
    textarea{
        margin: 0 auto;
    }
    lable{
        text-align: center;
    }
    </style>
</head>
<body>
<form action="" name="write" id="write" class="comment">
<lable for="content">请留言</lable>
<textarea  name="content" id="content" cols="30" rows="5" placeholder="请不要超过100字，谢谢"></textarea>
<button class="submit" name="submit">提交</button>
</form>
<ul class="list" placeholder="fdsjf"></ul>
<script type="text/javascript">
//获取form
const form=document.querySelector(".comment");
//textarea
const textarea=document.querySelector("textarea");
//btn
const submitBtn=document.querySelector(".submit");
//ul
const commentList=document.querySelector(".list");
//提交按钮点击事件
submitBtn.onclick=function(ev){
    //trim()省去字符串两边的空格
    // console.log(textarea.value.trim());
    ev.preventDefault();
      let value=textarea.value.trim();
      //剩余字符
      let  remainder=100-value.length;
      if(value.length>0&&value.length<=100){
        // 将留言插入列表
        //最新的留言总是第一条
        alert("你还可以输入"+remainder+"个字符");
        const newContent=document.createElement("li");
        newContent.textContent=value;
        //为新留言添加样式
        newContent.style.color="white";
        newContent.style.border="1px solid #ccc";
        newContent.style.listStyle="none";
        //创建一个删除按钮
        const delBtn=document.createElement("button");
        delBtn.textContent="删除"
        delBtn.style.backgroundColor="white";
        delBtn.style.float="right";
        delBtn.style.border="none";
        delBtn.style.marginTop="3px"
        // 将删除按钮添加到新留言的后面
        newContent.append(delBtn);
        //将新留言添加到ul里面
        commentList.prepend(newContent);
        //让按钮自定义取消或者是确认confirm()
        delBtn.onclick=function(){
                if(confirm("是否删除")){
                    this.parentNode.remove();
                    alert("删除成功");
                }
            }
        //通知用户留言成功
        alert("留言成功");
        textarea.value=null;
        return false;
      }
      else{
          alert("没有内容或者超过100字");
          textarea.focus();
          return false;
      }
}
</script>
</body>
</html>

数组,字符串常用的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
//concat()连结两个字符串相当于"+"
let str="html".concat("js, css, btr");
console(str);//html js css btr
console.log(['hello'],.concat(['p']));//[hellop]
//slice(start,end)，当中只有一个参数时取参数后面的全部字符串,接受负值
let str="hello php.cn";
let res=str.slice(0,5)//hello
let res2=str.slice(0)//hello php.cn
let res3=str.slice(-6)//php.cn
let res4=str.slice(-2)//cn
//substr(start,size)
let str="hello php.cn";
let sub=substr(0,5)//hello
let sum2=substr(-6,3)php//
//trim()不计算字符串之间的空格
//split将字符串变为数组,传入的参数在新生成的数组中取出。
let sp=str.split("")；
console.log(sp);//[h e l l o,p h p c n]
//运用
let email="admin@php.cn";
res=email.split('@');
console.log(res)//[admin][php.cn]
console.log(res[0])//admin
console.log(res[1])//php.cn
// pop()从尾部将数组第一个元素删除(出栈)没有参数.
let str2=[1,2,3];
console.log(str2.pop())；//1 2
//push向数组尾部添加一个元素。
console.log(str2.push(1));//1 2 3 1
//unshift()在头部添加一个元素
let str3=[1,2,3,4];
console.log(str3.unsift(2));2 1 2 3 4
//shift()在头部删除一个元素没有参数
console.log(str3.shift())//2 3 4
//join()将数组转化为字符串默认转为逗号连结的字符串
let arr=["电脑","手机","idpa"];
console.log(arr.join())//"电脑,手机,idpa"
//创建li
let resiger=arr.join("</li><li>");
console.log(`<li>${resiger}</li>`);//<li>电脑</li><li>手机</li><li>idpa</li>
//slice()
arr=[1,2,3,4,5,6]
res=arr.slice(0,3);//123
res=arr.slice(-3);//456
//splice()删除返回删除的元素
arr=[1,2,3,4,5,6]
res=arr.splice(2);//3456
//splice()新增元素
//不删除元素，将第二个参数设为0，但是要传入第三个参数表示要插入的元素
arr=[1,2,3,4,5,6,7,8];
res=arr.splice(1,0,88,100);
console.log(res)//1,88,99,2,3,4,5,6,7,8
//简化
res=arr.splice(1,0,...[88,100])
//splice()改元素将第二个参数设为要删除的元素，但是要传入第三个参数，用来替换被删除的元素
arr=[1,2,3,4,5,6,7,8,9]
res=arr.splice(1,3,...[e,r]);
console.log(res);//1,e,r,5,6,7,8,9
//filter对每一个成员应用回调函数进行处理，返回true成员组成的数组取奇数与偶数
arr=[1,2,3,4,5];
res=arr.filter((item)=>item%2);
console.log(res);//135
res=arr.filter((item)=>!(item%2);
console.log(res);//2,4
//reduce()归并参数将多个成员统计之后，单值返回prev前一个值，curr后一个值，接受第三个参数表示从该值进行计算
res=[1,2,3,4,5,6];
res=arr.reduce(function(prev,curr){
        return prev+curr;
})
console.log(res)//1+2+3+4+5+6=21
res=[1,2,3,4,5,6];
res=arr.reduce(function(prev,curr){
        return prev+curr;
}，10)
console.log(res)//10+1+2+3+4+5+6=31
   </script>
 </body>
</html>

留言板添加字数实时统计和超出判断以及数组字符串方法

留言板

数组,字符串常用的方法

更多相关文章

随机推荐