HTML5小记十四

2017-03-16  本文已影响0人  涛涛灬灬

1.关于a:visited、a:hover、a:link
设置一种效果未访问链接颜色为蓝色,活动链接为绿色,已访问链接为红色:
第一种情况: 定义的顺序是a:visited、a:hover、a:link,这时会发现:把鼠标放到未访问过的蓝色链接上时,它并不变成绿色,只有放在已访问的红色链接上,链接才会变绿。
第二种情况: 把CSS定义顺序调整为:a:link、a:visited、a:hover,这时,无论你鼠标经过的链接有没有被访问过,它都会变成绿色啦。
2.对于textarea的输入框字数限制的方法

方法一
document.getElementById("texts").onkeydown= function(){
    checkTextLength();//执行的方法
 };
方法二:
<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

经验证以上方法在一般demo中没有输出,最有效的方法是:
            <textarea onkeyup="ta(this)"  class="text"  id="texts" name="text" rows="6"   cols="160" placeholder="请输入您的意见"></textarea>//创建一个多行的输入框

function ta(obj){
    var val=$(obj).val().length;
    if(val>100){
        console.log("至多输入100个字符!");
        $(obj).val($(obj).val().substring(0,100))
        }
}
完美

3 . 设置一个按钮,并绑定方法

index.html:
    <div class="submmit">
            <button type="button" class="submmit send" onclick="btnClick()">提交</button>
        </div>
css:
.send{
    display: block; 
    margin-top: 70px;
    margin-left: 15%;
    width: 70%;
        height: 50px;
    text-align: center;
    background-color: purple;
    font-weight: 300;
    font-size: 18px;
    color: white;
    border-radius: 20px;
}
js:
 function btnClick(){
    console.log("按钮被点击了"+document.getElementById('texts').value);
} 

每一个昨天在成为昨天之前都曾有一个今天;每一个今天在成为今天之前都曾是我们的明天;打拼现在,为让明天成为更美好的今天;

上一篇下一篇

猜你喜欢

热点阅读