css3+h5
<html>
<head>
<title>h5</title>
<script type="text/javascript">
function getColor(){
var obj = document.getElementById("colorTarget");
alert(obj.value);
}
function getDate(){
var obj = document.getElementById("dateTarget");
alert(obj.value);
}
function getDateTime(){
var obj = document.getElementById("datetimeTarget");
alert(obj.value);
}
function getMonth(){
var obj = document.getElementById("monthTarget");
alert(obj.value);
}
function getTime(){
var obj = document.getElementById("timeTarget");
alert(obj.value);
}
function getWeek(){
var obj = document.getElementById("weekTarget");
alert(obj.value);
}
function getNum(){
var obj = document.getElementById("numberTarget");
alert(obj.value);
}
function getRange(){
var obj = document.getElementById("rangeTarget");
alert(obj.value);
}
function test(){
var obj = document.getElementById("rangeTarget");
// alert(obj.value);
document.getElementById("message").innerHTML=obj.value;
}
function getBrowers(){
var obj = document.getElementById("borwersTarget");
alert(obj.value);
}
function setLocal(){
var obj = document.getElementById("localTarget");
//保存
localStorage.setItem("name",obj.value);
//清除本地存儲
localStorage.clear("name");
location.href="index2.html";
}
</script>
</head>
<body>
<!--視頻-->
<video controls width="600">
<source src="resource/movie.mp4"/>
</video>
<hr/>
<!--音頻-->
<audio controls>
<source src="resource/默.mp3"/>
</audio>
<hr/>
<!--選擇顏色-->
<input type="color" id="colorTarget"/>
<input type="button" value="提取顏色" onclick="getColor()" />
<hr/>
<!--獲取日期-->
<input type="date" id="dateTarget" />
<input type="button" value="獲取日期" onclick="getDate()" />
<hr/>
<!--獲取日期和時間-->
<input type="datetime-local" id="datetimeTarget" />
<input type="button" value="獲取日期時間" onclick="getDateTime()" />
<hr/>
<!--獲取月-->
<input type="month" id="monthTarget" />
<input type="button" value="獲取月" onclick="getMonth()" />
<hr/>
<!--獲取時間-->
<input type="time" id="timeTarget" />
<input type="button" value="獲取時間" onclick="getTime()" />
<hr/>
<!--獲取周信息-->
<input type="week" id="weekTarget" />
<input type="button" value="獲取周信息" onclick="getWeek()" />
<hr/>
<!--電子郵箱驗證-->
<form>
請輸入電子郵箱：<input type="email" id="emailTarget" />
<!-- <input type="submit" formnovalidate /> 表單提交不進行驗證-->
<input type="submit" />
</form>
<hr/>
<!--設置數字範圍-->
<input type="number" max="5" min="1" id="numberTarget" />
<input type="button" value="獲取數字" onclick="getNum()" />
<hr/>
<!--滾軸設置數字範圍-->
<!--設置數字step-->
<div id="message"></div>
<input type="range" id="rangeTarget" max="50" min="1" step="1" onchange="test()" />
<input type="button" value="獲取數字" onclick="getRange()" />
<hr/>
<!--動態select-->
<input list="browers" id="borwersTarget"/>
<datalist id="browers">
<option value="fixfox"></option>
<option value="fifads"></option>
<option value="chrome"></option>
<option value="ie"></option>
</datalist>
<input type="button" value="獲取瀏覽器" onclick="getBrowers()" />
<hr/>
<!--獲取焦點-->
<input type="text" autofocus/>
<!--正則表達式-->
<hr/>
<form>
<input type="text" pattern="[A-Za-z]{3}" title="請輸入三位的字母" />
<input type="submit"/>
</form>
<!--必填-->
<form>
<input type="text" pattern="[A-Za-z]{3}" title="請輸入三位的字母" required />
<input type="submit"/>
</form>
<hr/>
<input type="text" id="localTarget"/>
<input type="button" value="提交" onclick="setLocal()" />
</body>
</html>javascript
<html>
<head>
<title>css3</title>
<style type="text/css">
/*旋轉*/
#test{
width: 100px;
height: 100px;
background-color: red;
/*順時針旋轉30°*/
transform:rotate(45deg);
}
/*移動*/
#test2{
width: 100px;
height: 100px;
background-color: red;
/*transform:translate(10px,10px);*/
/*transform:translateX(10px);*/
/*transform:translateY(10px);*/
transform:translate(10px);
}
/*顏色漸變*/
#test3{
width: 100px;
height: 100px;
background-color: red;
background: linear-gradient(red,green,yellow);
}
/*陰影*/
#test4{
width: 100px;
height: 100px;
background-color: red;
box-shadow: 10px 0px 10px black;
}
/*字體陰影*/
#test5{
text-shadow:0px 0px 10px black;
}
/*div伸縮*/
#test6{
width: 100px;
height: 100px;
background-color: green;
transform:scaleX(2);
}
/*3D旋轉*/
#test7{
width: 100px;
height: 100px;
background-color: blue;
/*x軸旋轉20°，y軸旋轉30°*/
transform:skewX(20deg);
}
/*執行動畫*/
#test8{
width: 100px;
height: 100px;
background-color: yellow;
animation:myfirst 2s;
position: relative;
}
@keyframes myfirst{
0% {background-color: red;left:0px;top:0px;}
45% {background-color: blue;left:100px;top: 0px;}
50% {background-color: blue;left: 100px;top: 100px;}
75% {background-color: green;left: 0px;top:100px;}
100%{background-color: yellow;left: 0px; top: 0px;}
}
</style>
</head>
<body>
<!-- <div id="test"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<font id="test5">hello world</font>
<div id="test6"></div>
<div id="test7">test7</div> -->
<div id="test8"></div>
</body>
</html>css
-
每一个你不满意的现在，都有一个你没有努力的曾经。