您的位置：首页 > 编程语言 > PHP开发

input type = "range"滑块和output的使用

2015-11-17 14:10 656 查看

这几天一直在学习html5表单新增的属性，写了如下的一个效果。

效果图：

[code]<!doctype html>
<html lang="en">
    <head>
    <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
        <meta charset="UTF-8">
        <meta name="Keywords" content="关键词一，关键词二">
        <meta name="Description" content="网站描述内容">
        <meta name="Author" content="">
        <title>range</title>
    <!--css js 文件的引入-->
        <style>
            #content{
                text-align:center;
                border:2px solid green;
                width:200px;
                height:150px;
                margin:20px auto;
                padding:20px;
                border-radius:20px;
                -moz-user-select:none; /*火狐*/
                -webkit-user-select:none; /*webkit浏览器*/
                -ms-user-select:none; /*IE10*/
                -khtml-user-select:none; /*早期浏览器*/
                user-select:none;
            }
            input[type=range]{
                outline:none;
            }
            input[type =range]::before{
                content:attr(min);
                padding-right:5px;
            }
            input[type =range]::after{
                content:attr(max);
                padding-left:5px;
            }
            output {
                display: block;
                font-size: 2em;
                font-weight: bold;
                color: #538923;
            }   
        </style>
    </head>
    <body>
        <div id = "content">
            <h3>音量控制</h3>
            <form>
                <input type = "range" name = "range"  id = "range" min = "0" max = "100"></input>
                <output name = "volume"></output>
            </form>
        </div>
    </body>
</html>
<script>
    (function(){
        var range = document.getElementById("range"),
        volume = document.forms[0]["volume"];//第一次使用这种方式获取document.forms[index][formName];
        //设置初值
        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 
        range.value = volume.value =  cachedRangeValue;
        //判断浏览器是否支持range滑动条
        if(range.type == "text"){
            document.forms[0].innerHTML = "抱歉，您的浏览器不支持range滑动条，请使用高版本浏览器";
        }
        //默认"false"，事件句柄在冒泡阶段支持；若为"true"，则事件在句柄捕获阶段执行
        range.addEventListener("mouseup",function(){
            localStorage ? (localStorage.rangeValue = range.value) : (console.log("不支持本地存储"));
        },"false");
        if(range.addEventListener){
            range.addEventListener("mouseup",function(){
                localStorage ? (localStorage.rangeValue = range.value) : (console.log("不支持本地存储"));
            },"false");
            range.addEventListener("change",function(){
                volume.value = range.value;
            });
        }else{
            range.attachEvent("onmouseup",function(){
                localStorage ? (localStorage.rangeValue = range.value) : (console.log("不支持本地存储"));
            });
            range.attachEvent("change",function(){
                volume.value = range.value;
            })
        }
    })();
</script>

再附上很使用的一个属性menu，目前仅有火狐支持此属性，具体用法如下：

[code]<body contextmenu = "context-menu">
</body>
//给要加上右键菜单的标签，加上contextmenu属性，属性值为menu的id
<menu type="context" id = "context-menu">
    <menuitem label = '刷新'></menuitem>
    <menu label = "新浪微博">                   
    <menuitem label = "新浪"></menuitem>
    <menuitem label = "微博"></menuitem>
    </menu>
</menu>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

input type = &quot;range&quot;滑块和output的使用

input type = "range"滑块和output的使用