HTML的JavaScript2

		获取当前时间

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>

猜你喜欢