美文网首页
HTML5小记十四

HTML5小记十四

作者: 涛涛灬灬 | 来源:发表于2017-03-16 20:10 被阅读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);
    } 
    

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

    相关文章

      网友评论

          本文标题:HTML5小记十四

          本文链接:https://www.haomeiwen.com/subject/idodnttx.html