• vscode微博发布案例

    样例:

    CSS代码:

    1. * {
    2.   margin: 0;
    3.   padding: 0;
    4. }
    5.  
    6. ul{
    7.   list-style: none;
    8. }
    9.  
    10. .w {
    11.   width: 900px;
    12.   margin: 0 auto;
    13. }
    14.  
    15. .controls textarea {
    16.   width: 878px;
    17.   height: 100px;
    18.   resize: none;
    19.   border-radius: 10px;
    20.   outline: none;
    21.   padding-left: 20px;
    22.   padding-top: 10px;
    23.   font-size: 18px;
    24. }
    25.  
    26. .controls {
    27.   overflow: hidden;
    28. }
    29.  
    30. .controls div {
    31.   float: right;
    32. }
    33.  
    34. .controls div span {
    35.   color: #666;
    36. }
    37.  
    38. .controls div .useCount {
    39.   color: red;
    40. }
    41.  
    42. .controls div button {
    43.   width: 100px;
    44.   outline: none;
    45.   border: none;
    46.   background: rgb(0, 132, 255);
    47.   height: 30px;
    48.   cursor: pointer;
    49.   color: #fff;
    50.   font: bold 14px '宋体';
    51.   transition: all 0.5s;
    52. }
    53.  
    54. .controls div button:hover {
    55.   background: rgb(0, 225, 255);
    56. }
    57.  
    58. .controls div button:disabled {
    59.   background: rgba(0, 225, 255, 0.5);
    60. }
    61.  
    62. .contentList {
    63.   margin-top: 50px;
    64. }
    65.  
    66. .contentList ul {
    67.   height: 800px;
    68. }
    69.  
    70. .contentList li {
    71.   /* display: none; */
    72.   padding: 20px 0;
    73.   border-bottom: 1px dashed #ccc;
    74.   height: 60px;
    75. }
    76.  
    77. .contentList li a {
    78.   margin-left: 800px;
    79. }

     HTML代码:

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.   <title>Documenttitle>
    9.   <link rel="stylesheet" href="./css/weibo.css">
    10.   <script src="../发布微博案例/jquery-3.7.1.min.js">script>
    11. head>
    12.  
    13. <body>
    14.   <div class="w">
    15.     <div class="controls">
    16.       <img src="images/tip.png" alt=""><br>
    17.       <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200">textarea>
    18.       <div>
    19.         <span class="useCount">0span>
    20.         <span>/span>
    21.         <span>200span>
    22.         <button id="send">发布button>
    23.       div>
    24.     div>
    25.     <div class="contentList">
    26.       <ul id="list">
    27.       ul>
    28.     div>
    29.   div>
    30.   <script src="./index.js">script>
    31. body>
    32.  
    33. html>

     js代码:

    1. const user=[{usname:'未命名',imgSrc:'images/03.jpg'}]
    2. let textarea=document.querySelector('textarea')
    3. let useCount=document.querySelector('.useCount')
    4. let btn=document.querySelector('#send')
    5. let ul=document.querySelector('#list')
    6. //检测输入字数:
    7. textarea.addEventListener('input',function(){
    8.     useCount.innerHTML=this.value.length
    9. })
    10. btn.addEventListener('click',function(){
    11.     //输入不能为空
    12.     if(textarea.value.trim()==='')
    13.     {   
    14.         return alert('内容不能为空')
    15.     }
    16.     function getrandom(min,max){
    17.         return Math.floor(Math.random()*(max-min+1))+min
    18.     }
    19.     let a=getrandom(0,user.length-1)
    20.     //  新增留言 应写在点击事件内部
    21.     // 创建一个小li 然后里面通过innerHTML追加数据
    22.     let li=document.createElement('li')
    23.     li.innerHTML=`
    24.     ${user[a].imgSrc}>
    25.     ${user[a].usname}
    26.     
    27.     
      ${textarea.value}
    28.     
      ${new Date().toLocaleString()}
      `
    29.     //删除
    30.     let del = li.querySelector('.del');
    31.     del.addEventListener('click', function () {
    32.     ul.removeChild(li);
    33.     });
    34.     //
    35.     ul.insertBefore(li, ul.children[0]);
    36.     textarea.value = '';
    37.     useCount.innerHTML = 0;
    38.  
    39. })
    40. //再按下回车同时发送
    41. textarea.addEventListener('keyup',function(a){
    42.     if(a.key === 'Enter'){
    43.         btn.click()
    44.     }
    45. })

  • 相关阅读:
    Mysql基础（三）——常用函数与聚合函数
    【2024校招】2023-9-17 度小满信贷系统平台部后端一面
    《统计学习方法》第五章决策树总结
    基于阈值预分割的区域生长分割法研究-含Matlab代码
    高标准农田数字孪生
    OptiMode应用矢量有限元法模拟表面等离子体激元
    还在stream中使用peek?不要被这些陷阱绊住了
    『华强买瓜』奇袭好莱坞！Jupyter也能创建可交互仪表板啦！超全面的英语论文写作套路；神经辐射场NeRF工具包；前沿论文 | ShowMeAI资讯日报
    Java的运算符
    矢量绘图软件 Sketch mac中文版介绍
  • 原文地址：https://blog.csdn.net/simply_happy/article/details/137970494