返回我的作业 谢谢......登陆

我的作业 谢谢老师

王先生2019-03-03 13:40:14209

<!DOCTYPE html>


<html>


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <meta http-equiv="X-UA-Compatible" content="ie=edge">


  <title>我的作业</title>


  <style type="text/css">


    body{font-size: 13px;}


    .box{width: 600px;height: 160px;border: 10px solid pink;margin: 0px auto;padding: 10px;}


    /* div的样式边框以及内外边距,内边距会把元素向外撑大 */


    img{float: left;}


    .box1{float: left;margin-left: 255px;width: 150px;height: 24px;text-align: right;font-size: 14px;color: #888;}


    /* 里面两个元素 img与文本span 设置左浮动变为块级元素,然后设置左外边距,固定位置 */


    .box1 span{font-size: 16px;font-weight: bold;}


    #text{width: 600px;height: 100px;border: 1px solid #888;margin-top: 5px;}


    .box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float: left;width: 30px;height: 32px;line-height: 32px;padding-left: 26px;}


    /* 设置元素左浮动变为块级元素,然后line-height设置块级元素的行高,内左边距为26 */


    #sp1{background: url(img/an5.png)no-repeat left center;}


    #sp2{background: url(img/an4.png)no-repeat left center;}


    #sp3{background: url(img/an3.png)no-repeat left center;}


    #sp4{background: url(img/an2.png)no-repeat left center;}


    #sp5{background: url(img/an1.png)no-repeat left center;width: 40px;}


    /* 设置元素的图片不平铺 向左 居中*/


    #sp6{margin-left: 160px;margin-right: 15px;color: #888;}


    #bt{float: left;width: 75px;height: 30px;border: none;background: #ffc09f;color:#fff;border-radius: 5px;}


  </style>

  <script type="text/javascript">

    window.onload=function(){

      var text=document.getElementById('text')

      var number=document.getElementById('number')

      bt=document.getElementById('bt')

      text.onkeyup=function aa(){

         m=140-text.value.length

        if(m<0){

          number.style.color="red"

        }

        else{

          number.style.color="#888"

        }

        number.innerHTML=m;

      }

      bt.onclick=function(){

        if(m==140)

        {

          alert("请输入内容")

          text.focus()

        }

        else if(m<0)

        {

          alert("字数太多,请重新输入")

          text.focus()

        }

        else

        {

          alert("发布成功")

        }

      }

      aa()


    }

  </script>


</head>


<body>


  <div class="box">


    <img src="img/12.png" alt="">


    <div class="box1">还可以输入 <span id="number"></span>字


    </div>


    <textarea id="text"></textarea>


    <span id="sp1">表情</span>


    <span id="sp2">图片</span>


    <span id="sp3">视频</span>


    <span id="sp4">话题</span>


    <span id="sp5">长微博</span>


    <span id="sp6">公开</span>


    <input type="button" id="bt" value="发布">


  </div>


</body>


</html>



我有一个问题  script里  有4个变量, munber text m  bt  如果都不用var声明 程序也是可以正常运行的  但是如果声明了bt  点击button按钮时就没有反应,声明了m  根据作用域不同 也会出问题  这是为什么呢

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送