返回微博输入框Jq......登陆

微博输入框Jquery版本

恋姣???2019-06-15 23:08:18275

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!DOCTYPE html>

<html><head>

    <meta charset="utf-8">

    <title>微博输入</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style type="text/css">

body {

    font-size: 12px;

}

.box {

    width: 600px;

    height: 160px;

    border: 10px solid pink;

    margin: 0px auto;

    padding: 10px;

}

img {

    float: left;

}

.box1 {

    float: left;

    margin-left: 255px;

    width: 150px;

    height: 24px;

    text-align:right;

    font-size: 14px;

    color: #888;

}

.box1 span {

    font-size: 16px;

    font-weight: bold;

}

#text {

    width: 600px;

    height: 100px;

    border: 1px solid #ccc;

    margin-top: 5px;

}

.box #sp1, #sp2, #sp3, #sp4, #sp5, #sp6 {

    float: left;

    width: 30px;

    height: 32px;

    line-height: 32px;

    padding-left: 26px;

}

#sp1 {

    background: url(images/an5.png) no-repeat left center;

}

#sp2 {

    background: url(images/an4.png) no-repeat left center;

}

#sp3 {

    background: url(images/an3.png) no-repeat left center;

}

#sp4 {

    background: url(images/an2.png) no-repeat left center;

}

#sp5 {

    background: url(images/an1.png) no-repeat left center;

    width: 40px;

}

#sp6 {

    margin-left: 158px;

    margin-right: 15px;

    color: #888;

}

#bt {

    float: left;

    width: 80px;

    height: 30px;

    border: none;

    background: #ffc09f;

    color: #fff;

    border-radius: 5px;

}

</style>

    <script type="text/javascript">

    /* Jquery版本 */

     

    $('document').ready(function() {

    $('#text').keyup(function(){

        var len=140- $(this).val().length;

        if(len<0){

            $('#number').css('color','red');

            }else{

            $('#number').css('color','red');   

            };

        $('#number').html(len);

        });

    $('#bt').click(function(){

        _len=140-$('#text').val().length;

        if(_len ==140){

            alert('您还没有输入内容');

            $('#text').focus();

            }else if(_len<0){

                alert('字数超出限制,请检查');

            $('#text').focus();

                }else{

                alert('发布成功')  

                    }

        });

    });

     

    /*

    Javascript版本

    //var str,num,obj

    window.onload=function (){

        str=document.getElementById("text");

        num=document.getElementById("number");

        bt=document.getElementById("bt");

    str.onkeyup=function key(){

        o=140-str.value.length;

        if(o<0){

            num.style.color="red";

            }else{

            num.style.color="blue";

            }

    num.innerHTML=o;       

         

        }

    bt.onclick=function(){

        if(o ==140){

            alert('请输入内容');

            str.focus();

            }else if(o<0){

                alert('超出规定字符数');

            str.focus();

                }else{

                alert('发布成功')  

                     

                    }

         

        }  

        }*/

         

    </script>

    </head>

    <body>

    <div class="box"> <img src="images/12.png">

      <div class="box1">还可以输入<span id="number">140</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" value="发布" id="bt">

    </div>

</body>

</html>


最新手记推荐

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

全部回复(0)我要回复

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