JavaScript基础案例(一)

JavaScript简单案例

    • 案例一:动态时间显示
    • 案例二:在列表末尾添加节点
    • 案例三:复选框练习

案例一:动态时间显示

效果图
思路:
1、使用new Date()获取当前时间。

var date = new Date();

此时显示的时间格式为:Thu Jan 24 2019 14:40:09 GMT+0800 (中国标准时间)
2、对时间进行格式化操作

date.toLocaleString();

格式化之后:2019/1/24 下午2:43:45
3、获取标签
使用document的getElementById()方法获取相应的标签

document.getElementById("标签的id的值");

4、将date属性写进div标签里

div1.innerHTML = date;

5、设置定时器

setInterval("code",time);

code:要调用的函数或要执行的代码串。
time:周期性执行或调用 code 之间的时间间隔,以毫秒计。
完整代码


<html>
<head>
  	<meta charset="UTF-8">
  	<title>title>
head>
 <body>
  	<div id="divid">div>
  	<script type="text/javascript">
   		function D1(){
	    		//当前时间
	    		var date = new Date();
		        //格式化时间
		        var d1 = date.toLocaleString();
		        //获取div
		        var div1 = document.getElementById("divid");
		        //将时间d1写进div
		        div1.innerHTML = d1;	
		}
		
	   //定时器setInterval("code",time);
 		  setInterval("D1()",1000);	
	 script>
 body>
html>

案例二:在列表末尾添加节点

JavaScript基础案例(一)_第1张图片
JavaScript基础案例(一)_第2张图片
思路:
1、使用

无序列表

<ul id="ulid">
   <li>GoodBoli>
   <li>BadBoli>
   <li>BigBoli>
   <li>SmallBoli>
  ul>

2、添加一个按钮

<input type="button" value="添加" onclick="method()"/>

3、在script标签中定义method()方法实现添加节点的操作

  1. 通过getElementById()来获取标签ul
 var ul1 =document.getElementById("ulid");
  1. 创建一个li节点
 var li1 =document.createElement("li");
  1. 创建一个li的文本
 var text1 =document.createTextNode("AmazingBo");
  1. 使用appendChild()方法实现向节点添加最后一个节点
 li1.appendChild(text1);
 ul1.appendChild(li1);

完整代码


<html>
 <head>
	  <meta charset="UTF-8">
	  <title>title>
 head>
 <body>
	  <ul id="ulid">
	 	  <li>GoodBoli>
		  <li>BadBoli>
		  <li>BigBoli>
	 	  <li>SmallBoli>
  	  ul>
	  <input type="button" value="添加" onclick="add()" />
  <script type="text/javascript">
   	function add(){
    		var ul1 = document.getElementById("ulid");
    		var li1 = document.createElement("li");
    		var text1 = document.createTextNode("AmazingBo");
   		li1.appendChild(text1);
    		ul1.appendChild(li1);
   	}
  script>
 body>
html>

案例三:复选框练习

JavaScript基础案例(一)_第3张图片
思路:
1、创建复选框

//如:
<input type="checkbox" id="boxid"/>全选/全不选

2、创建按钮

<input type="button" value="全选"/>

3、定义全选方法selAll()

function selAll(){
    //获取复选框,返回一个hobbyArr数组
    	var hobbyArr = document.getElementsByName("hobby");
    //遍历hobbyArr数组,将复选框的属性checked赋值为true
    	for(var i = 0;i < hobbyArr.length;i++){
     		hobbyArr[i].checked = true;
    	}
}

4、定义全不选方法selNo()

function selNo(){
    //获取复选框,返回一个hobbyArr数组
    	var hobbyArr = document.getElementsByName("hobby");
    //遍历hobbyArr数组,将复选框的属性checked赋值为false
    	for(var i = 0;i < hobbyArr.length;i++){
     		hobbyArr[i].checked = false;
    	}
}

5、定义反选方法selOther()

function selOther(){
    //获取复选框,返回一个hobbyArr数组
    	var hobbyArr = document.getElementsByName("hobby");
    //遍历hobbyArr数组,将复选框的属性checked赋值为false
    	for(var i = 0;i < hobbyArr.length;i++){
     		if(hobbyArr[i].checked)
      			hobbyArr[i].checked = false;
     		else
      			hobbyArr[i].checked = true;
    	}
}

完整代码


<html>
 <head>
  <meta charset="UTF-8">
  <title>title>
 head>
 <body>
  	<input type="checkbox" id="boxid" onclick="selAllNo()" />全选/全不选
  	<br />
	<input type="checkbox" name="hobby"/>篮球
	<input type="checkbox" name="hobby"/>羽毛球
	<input type="checkbox" name="hobby"/>排球
	<input type="checkbox" name="hobby"/>乒乓球
	<br />
	<input type="button" value="全选" onclick="selAll()"/>
  	<input type="button" value="全不选" onclick="selNo()"/>
  	<input type="button" value="反选" onclick="selOther()"/>
  <script type="text/javascript">
   	//复选框全选/全不选
   	function selAllNo(){
    	//获取全选/全不选复选框
    		var boxid1 = document.getElementById("boxid");
    	//获取hobby复选框得到一个数组
    		var hobbyArr = document.getElementsByName("hobby");
    	/*方法一
     	if(boxid1.checked){
     		for(var i = 0;i < hobbyArr.length;i++){
      			hobbyArr[i].checked = true;
     		}
    	}else{
     		for(var i = 0;i < hobbyArr.length;i++){
      			hobbyArr[i].checked = false;
     		}
    	}
    */
    //方法二
    	if(boxid1.checked)
     		selAll();
    	else
     		selNo();
   }
   //全选
   function selAll(){
    //获取复选框,返回一个hobbyArr数组
    	var hobbyArr = document.getElementsByName("hobby");
    //遍历hobbyArr数组,将复选框的属性checked赋值为true
    	for(var i = 0;i < hobbyArr.length;i++){
     		hobbyArr[i].checked = true;
    	}
   }
   //全不选
   function selNo(){
    //获取复选框,返回一个hobbyArr数组
    	var hobbyArr = document.getElementsByName("hobby");
    //遍历hobbyArr数组,将复选框的属性checked赋值为false
    	for(var i = 0;i < hobbyArr.length;i++){
     		hobbyArr[i].checked = false;
    	}
   }
   //反选
   function selOther(){
    //获取复选框,返回一个hobbyArr数组
    	var hobbyArr = document.getElementsByName("hobby");
    //遍历hobbyArr数组,将复选框的属性checked赋值为false
    	for(var i = 0;i < hobbyArr.length;i++){
     		if(hobbyArr[i].checked)
      			hobbyArr[i].checked = false;
     		else
      			hobbyArr[i].checked = true;
    	}
   }
  script>
 body>
html>

你可能感兴趣的:(前端)