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
-
每一个你不满意的现在，都有一个你没有努力的曾经。