Welcome 您好!

    

HTML+CSS+JS实现统计字符长度数量

QQ截图20180813204652.png


HTML

<div class="wrap">
<textarea name="" id="text"></textarea>
<input type="button" value="查看字符长度">
</div>

css

 <style>
 .wrap {
width:406px;
text-align:right;
margin:auto;
 }
 textarea {
width:400px;
max-width:400px;
height:200px;
display:block;
margin:auto;
font-size:20px;
box-shadow:-2px -4px 8px rgba(190,189,189,0.42) inset;
 }
 input[type=button] {
margin-top:12px;
padding:10px;
outline:none;
border:none;
cursor:pointer;
vertical-align:top;
color:#fff;
font-weight:bold;
font-family:Arial;
background:-webkit-linear-gradient(top,#71ccfd,#2d76fd);
border-radius:8px;
}
</style>

js

<script>
var text = document.getElementById('text'),
btn = document.getElementsByTagName('input')[0];
btn.onclick = function() {
var val = text.value;
console.log(val)
if (val == '') {
    alert('请输入内容!')
} else {
    alert('当前字符长度为:' + retByteslen(val))
}
}

function retByteslen(target) {
var count = 0;
for (var i = 0; i < target.length; i++) {
    if (target.charCodeAt(i) <= 255) {
        count++;
    } else if (target.charCodeAt(i) > 255) {
        count += 2;
    }
}
return count;
console.log(count);
}
</script>

亿七Seven

添加新评论

青春就是用来追忆的,当你怀揣着它时,它一文不值,只有将它耗尽后,再回过头看,一切才有了意义,爱过我们的人和伤害过我们的人,都是我们青春存在的意义。

既然活着来到这个世界,就没有打算活着回去。所以,在这有限的时间里,我们应该珍惜生命,珍惜机会,更要珍惜那得之不易的时间。因那滴答做响的时间脚步,一旦走过,再不回头。

青春是一个充满魁力,充满诱惑的时代。好动是青春,好奇是青春,好玩是青春。玩世不恭更是青春,我们的一切切都是青春。

要先打败任何事情得先学会打败自己。

我会把每一次改变当做成长,哪怕是痛也值得。