1.留言板
代码块
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>留言板</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}body {background-color:rgb(174, 236, 236);color: #555;}.comment {width: 40%;margin: 1em auto;display: grid;gap: 0.5em;}.comment #content {resize: none;border:none;padding: 0.5em;outline: none;}.comment #content:focus,.comment #content:hover {box-shadow: 0 0 8px steelblue;transition: 0.6s;}.comment .submit {width: 30%;margin-left: auto;background-color: lightseagreen;border: none;outline: none;color: white;height: 2.5em;}.comment .submit:hover {background-color: seagreen;transition: 0.6s;cursor: pointer;}.list {width: 80%;/* background-color: yellow; */margin: auto;padding: 1em;}.del-btn {background-color: wheat;color: red;padding:0.5em 1em;/* height: 2.2em; */border:none;outline: none;}.del-btn:hover {cursor: pointer;background-color: lime;}</style></head><body><form action="" class="comment"><label for="content">请留言</label><textarea name="content" id="content" cols="30" rows="5" onkeyup="countWord(this)" maxlength="100"></textarea><button type="button" name="submit" class="submit">提交</button><ul class="list"></ul></form><script>//第一步获取元素const comment = document.querySelector('.comment');//textareaconst content = comment.content;//btnconst submitBtn = comment.submit;//ulconst commentList = document.querySelector('.list');const wordCount = document.createElement('div');wordCount.style.color = 'red';wordCount.textContent = '还可以输入100字';submitBtn.before(wordCount);function countWord(input){if (wordCount && input) {let value = input.value;value = value.replace(/\n|\r/gi,"");wordCount.textContent = "还可以输入"+(100-value.length)+"字";}}submitBtn.onclick = (ev) => {//console.log(content.value.trim().length);let value = content.value.trim();if (value.length>0 && value.length<=100 ) {// 最新的留言应该插入第一条const newComment = document.createElement('li');newComment.textContent = value;newComment.style.borderBottom = '1px solid white';newComment.style.minHeight = '3em';//添加删除按钮const delBtn = document.createElement('button');delBtn.textContent = '删除';delBtn.style.float = 'right';delBtn.classList.add('del-btn');delBtn.onclick = function () {if (confirm('是否删除')) {// 确定是true ，反之falsethis.parentNode.remove();alert('删除成功');content.focus();return false;}}//将删除按钮添加到新留言的后面newComment.append(delBtn);// 将新留言添加到列表中commentList.append(newComment);//通知用户alert('留言成功');content.value = null;content.focus();}else {alert('没有内容或内容超出规定长度');content.focus();return false;}}</script></body></html>
效果图
2.字符串数组函数
字符串函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>字符串方法</title></head><body><script>// 1.slice(start,end)//2.substr(start,size)//3. trim('去空格');let str = 'html'.concat('1','2');console.log(str);console.log(str.slice(0,1));console.log(str.slice(0))//从第几个位置开始取console.log(str.slice(1))//4.字符串打散成数组console.log(str.split(''));</script></body></html>
效果图
数组函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>数组常用函数</title></head><body><script>// 1.栈方法// 栈:只允许在数组一端进行增删的操作let arr = [12,2];//入栈 push()//出栈 pop() 删除末尾的元素console.log(arr.pop());console.log(arr);//数组头部进行增删//unshift():从头部添加 返回值是数组元素个数//shift():从头部删除 返回值是数组元素个数console.log(arr.unshift(1))console.log(arr.shift(1))// 2.数组转字符串 join()let res = arr.join(",");console.log(res);// 3.数组的增删改 splice()arr = [1,2,3,4];//删除所有元素 返回值删除的元素console.log(arr.splice(0));//更新arr = [1,2,3,4];// 第二个元素后添加,删除一位arr.splice(1,1,...[12,22,33]);console.log(arr)//4.forEach()循环//5.filter() 过滤器 对每个成员应用回调函数进行处理返回true的成员的数组//取奇数res = arr.filter((items)=>items % 2);console.log(res);//6.reduce():归内操作，将多成员进行统计后，单值返回arr = [1,2,3,4];res = arr.reduce((prev,curr)=> prev + curr,20);//20是添加的初值console.log(res);</script></body></html>
效果图
