Quantcast
Channel: 看得透又看得远者prevail. ppt.cc/flUmLx ppt.cc/fqtgqx ppt.cc/fZsXUx ppt.cc/fhWnZx ppt.cc/fnrkVx ppt.cc/f2CBVx
Viewing all articles
Browse latest Browse all 20536

HTML5的新控件元素

$
0
0



滑块控件 Range 对象

Range主代码<input type="range">. HTML5新元素.
<inputtype="range"id="myRange">

<p>点击按钮来获得滑块控件的值。</p>

<buttononclick="myFunctionRange()">试一下</button>

<pid="demoRange"></p>

<script>
functionmyFunctionRange(){
varx=document.getElementById("myRange").value;
document.getElementById("demoRange").innerHTML=x;
}
</script>
<p>点击按钮来获得滑块控件的值。</p><p id="demoRange"></p>

数值选择 Number 控件

Number主代码:<input type="number">. HTML5新元素.
<inputtype="number"id="myNumber"value="2"max="10"min="-2">

<p>点击按钮来获得 number 字段的数字。</p>

<buttononclick="myFunctionNumber()">试一下</button>

<pid="demoNumber"></p>

<script>
functionmyFunctionNumber(){
varx=document.getElementById("myNumber").value;
document.getElementById("demoNumber").innerHTML=x;
}
</script>
<p>点击按钮来获得 number 字段的数字。</p>
<p id="demoNumber"></p>

日期选择 Date 对象

Date主代码<input type="date"> (HTML5才支持)
<inputtype="date"id="myDate"value="2014-06-01">

<p>点击按钮来获得 date 字段的日期。</p>

<buttononclick="myFunctionDate()">试一下</button>

<pid="demoDate"></p>

<script>
functionmyFunctionDate(){
varx=document.getElementById("myDate").value;
document.getElementById("demoDate").innerHTML=x;
}
</script>

点击按钮来获得 date 字段的日期。

拾色器 color 对象

Color主代码: <input type="color">. HTML5新元素.
选择您喜爱的颜色:<inputtype="color"id="myColor">

<p>请点击按钮来获得颜色选择器的颜色。</p>

<pid="demoColor"></p>

<buttononclick="myFunctionColor()">试一下</button>

<script>
functionmyFunctionColor(){
varx=document.getElementById("myColor").value;
document.getElementById("demoColor").innerHTML=x;
}
</script>
选择您喜爱的颜色:
请点击按钮来获得颜色选择器的颜色。
#000000

比较次要不常用的元素..

网址 url 对象

url主代码<input type="url"> HTML5新元素. 形式和text输入框类似.

搜索 search 对象

Search主代码<input type="search"> HTML5新元素. 形式和text输入框类似.

Email 对象

[Email]对象(http://www.w3school.com.cn/jsref/dom_obj_email.asp) 主代码<input type="email"> HTML5新元素. 形式和text输入框类似.

Viewing all articles
Browse latest Browse all 20536

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>