返回微博输入框小案......登陆

微博输入框小案例

辰晨2019-07-15 17:46:1916

一、基本思路:

1.写好基本样式后,通过id或标签名获取到数字、文本框及按钮

2.声明一个变量n,通过length方法获取到当前文本框字数,n=总字数-文本框字数

3.用n的值进行判断,若n>0,文本颜色不变,并用innerHTML方法将数字改为当前n的值,反之则变红色。

4.用n的值判断是否可以发布,大于总字数,弹出框提示减少字数后发布,小于则发布,当n=总字数时说明没有内容,提示用户写内容,并获取文本框焦点

二、运行结果及代码

1.JPG

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>微博输入框</title>

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body{

background-color: #6aafd8;

}

.con{

width: 580px;

height: 21px;

overflow: hidden;

}

.box{

width: 580px;

height: 140px;

padding: 15px 10px 10px;

background-color: #fff;

border-radius: 6px;

margin:50px auto;

overflow: hidden;

}

#font{

color:#1b7fb6;

font-size: 18px;

font-family: "WBswficon";

float: left;

line-height: 21px;

}

.right{

font-size: 14px;

line-height: 21px;

float:right;

color: #888;

}

#zi{

font-size: 16px;

font-weight: bold;

}

#text{

width: 568px;

height: 68px;

padding: 5px;

margin-top: 4px;

}

.icon{

width: 400px;

height: 24px;

padding-top: 10px;

color: #373737;

float: left;

}

.icon span{

font-size:12px;

line-height: 24px;

margin-right: 18px; 

}

.func{

width: 160px;

height: 30px;

padding: 5px 0 0;

float: right;

font-size: 12px;

line-height: 30px;

color: #373737;

overflow: hidden;

}

.func span{

height: 30px;

margin-left:50px;

}

button{

width: 60px;

height: 30px;

border:none;

border-radius:3px;

background-color: #ffc09f;

color: #fff;

float: right;

padding: 0 10px;

}

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

font-size: 12px;

line-height:24px;

cursor: pointer;

color: #373737;

}

#fa{

margin-right:5px;

font-size: 16px;

}

.sp #fa{

color:green;

}

</style>

<script>

window.onload=function() {

var text = document.getElementById('text');

var zi = document.getElementById('zi');

var but = document.getElementById('but');

text.onkeyup=function aa() {

var n = 140-text.value.length;

if(n<0){

zi.style.color = 'red';

}else{

zi.style.color = '#888';

}

zi.innerHTML = n;

}


but.onclick=function(){

var n = 140-text.value.length;

     if (n==140) {

     alert("请输入内容后发布");

     text.focus();

     }else if(n<0){

     alert("减少字数后再发布哦");

     text.focus();

     }else{

     alert("发布成功");

     }

     }

}


</script>

</head>

<body>

<div>

<div>

<span id="font">有什么新鲜事想告诉大家?</span>

<div>还可以输入<span id="zi">140</span>字</div>

</div>

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

<div>

<span><i id="fa" class="fa fa-frown-o"></i>表情</span>

<span><i id="fa" class="fa fa-image"></i>图片</span>

<span><i id="fa" class="fa fa-youtube-play"></i>视频</span>

<span><i id="fa" class="fa fa-paperclip"></i>话题</span>

<span><i id="fa" class="fa fa-file-text"></i>头条文章</span>

<span><i id="fa" class="fa fa-ellipsis-h"></i></span>

</div>

<div>

<span>公开</span>

<button id="but">发布</button>

</div>

</div>

</body>

</html>


最新手记推荐

• 新闻模块对应模块的代码• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网