获取当前时间
var dt=new Date();
document.getElementById('todaydate').innerHTML=dt.toLocaleDateString();
1.ChangeColor
<div id="main">
<br />改变颜色
<div id="div1" onmouseover="changediv()" onmouseout="changedivback()"></div>
</div>
<script>
function changediv() {
var divcolor =document.getElementById('div1');
divcolor.style.backgroundColor="#0F9";
}
function changedivback() {
var divcolor=document.getElementById('div1');
divcolor.style.backgroundColor="#6FF";
}
</script>
2.ChangeImage
<div id="main">
<img id="images" src="images/forest1.jpg" onmouseover="change('images/forest1.jpg')" onmouseout="change('images/forest2.jpg')" />
</div>
<script>
function change(images)
{
var cc = document.getElementById("images");
cc.src=images;
}
</script>
3.导航菜单
<div id="main">
<select onchange="window.location=this.value">
<option value="#">请选择网页</option>
<option value="202.html">第二题</option>
<option value="402.html">第三题</option>
</select>
</div>
4.HTML5客户端验证
<div id="main">
<form>
图书名称:<input type="text" placeholder="图书名称必须输入!" required="required"/><br />
图书ISBN:<input type="text" placeholder="格式:123-1-123-12345"/><br />
图书价格:<input type="number" min="20" max="150" step="5" pattern="\d{3}-\d{1}-\d{3}-\d{5}"/><br />
作者邮箱:<input type="email" placeholder="请输入邮箱地址!"/><br />
图书详情:<input type="url" placeholder="请输入URL路径!"/><br />
<input type="button" value="提交" />
</form>
</div>
5.移动改变文字
<div id="main">
<h2>设置文本</h2>
<div id="dd" onmouseover="changezi()" onmouseout="changeback()">把鼠标移动到上面!</div>
</video>
</div>
<script>
function changezi() {
document.getElementById("dd").innerHTML="小剑同志";
}
function changeback() {
document.getElementById("dd").innerHTML="把鼠标移动到上面!";
}
</script>
6.视频
<div id="main">
<video controls="controls">//控件添加
<source src="video/movie.webm"/>
<source src="video/movie_h264.mp4"/>
</video>
</div>
7.改变图片大小
<div id="main">
<br />改变颜色
<div id="div1" onmouseover="changediv()"></div>
</div>
<script>
var dt=new Date();
document.getElementById('todaydate').innerHTML=dt.toLocaleDateString();
function changediv() {
var divsize =document.getElementById('div1');
divsize.style.height="127px";
divsize.style.width="200px";
divsize.style.marginTop="50px";
divsize.style.marginLeft="80px";
}
</script>
弹出菜单
<style>
#first{
text-align:center;
width:150px;
}
#second{
text-align:right;
visibility:hidden;
width:150px;
}
</style>
<div id="main">
<div id="first" onmouseover="document.getElementById('second').style.visibility='visible'" onmouseout="document.getElementById('second').style.visibility='hidden'">弹出菜单
</div>
<div id="second">
<a href="">第2题</a><br/>
<a href="">第4题</a><br/>
</div>
</div>