Js练习

显示和隐藏，改变display属性(点击查看图片)

关键代码：

e.style.display = "block";

e.style.display = "none";

源码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>显示和隐藏</title>

		<script type="text/javascript">

			function showPicture(){

				//普通方式获得控件实例

				var e = document.getElementById("myimg");

				e.style.display = "block";

			}

			function hidePicture(){

				//querySelector是html5增加的

				//id前面得写#,class前面得写

				document.querySelector("#myimg").style.display = "none";

				//标签直接写即可,获取到第一个img标签

				//document.querySelector("img").style.display = "none";

			}

		</script>

	</head>

	<body>

		<a href="javascript:void(0);"onclick="showPicture()">查看图片</a>

		<a href="javascript:void(0);"onclick="hidePicture()">隐藏图片</a>

		<br />

		<img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;"  >

	</body>

</html>

querySelector三种方法介绍

鼠标滑动更改内容 onmouseover

关键：

onmouse事件

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script type="text/javascript">

			function moveToBlue(){

				var e = document.querySelector("#btn_blue");

				var e2 = document.querySelector("#btn_green");

				var div = document.querySelector("#content");

				e.style.border = "1px solid #ccc";

				e.style.backgroundColor = "white";

				e2.style.border = "none";

				e2.style.backgroundColor = "none";

				div.style.backgroundColor = "blue";

			}

			function moveToGreen(){

				var e = document.querySelector("#btn_blue");

				var e2 = document.querySelector("#btn_green");

				var div = document.querySelector("#content");

				e2.style.border = "1px solid #ccc";

				e2.style.backgroundColor = "white";

				e.style.border = "none";

				e.style.backgroundColor = "none";

				div.style.backgroundColor = "green";

			}

		</script>

	</head>

	<body>

		<div style="width: 100px;height: 50px;">

			<button id="btn_blue" style="width: 45px;"onmousemove="moveToBlue()">蓝色</button>

			<button id="btn_green" style="width: 45px;"onmousemove="moveToGreen()">绿色</button>

			<div id="content" style="background-color: blue;width: auto;height: 50px;"></div>

		</div>

		<br />

		<img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;">

	</body>

</html>

时间自动更新

关键代码：

Js中内置了Date对象

  • getFullYear 年
  • getMonth 月
  • getDate 日
  • getHours 小时
  • getMinutes 分钟
  • getSeconds 秒
  • getDay 星期几（0-6） 星期日为0
方法 说明
getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 
 var now = new Date();

 var time =now.getFullYear() + '年' + now.getMonth() + '月'

     + now.getDate() + '日'

     +now.getHours() +'时' + now.getMinutes() +'分' + now.getSeconds() + '秒';
  1. setTomeout(fn, 周期：豪秒): 周期只会执行一次
  2. setInterval(fn, 周期：豪秒)： 间隔周期一直执行

源码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>时间自动更新</title>

	</head>

	<body>

		<p></p>

		<script type="text/javascript">

			function setTime() {

				var date = new Date();

				var time = date.toTimeString();

				document.querySelector("p").innerText = time;

			}

			setTime();

			//setIime不能加上括号

			// setInterval(setTime, 1000);

			//加括号得得在外层加双引号或者单引号

			setInterval("setTime()", 1000);

		</script>

	</body>

</html>

源码（es拼接字符串）：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<p></p>

		<script type="text/javascript">

			function setTime() {

				var now = new Date();

				// 通过css的选择符获得html元素

				var timer1 = document.querySelector('p');

				var year = now.getFullYear();

				var month = now.getMonth() + 1;

				var date = now.getDate();

				var hours = now.getHours();

				var minutes = now.getMinutes();

				var seconds = now.getSeconds();

				//es6中模板字符串,拼接

				timer1.innerText = `${year}年${month}月${date}日${hours}时${minutes}分${seconds}秒`;

			}

			setTime();

			//setIime不能加上括号

			// setInterval(setTime, 1000);

			//加括号得得在外层加双引号或者单引号

			setInterval("setTime()", 1000);

		</script>

	</body>

</html>

表单

关键代码：e.checked=true;

全选和反选的实现

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script type="text/javascript">

			function selectAll() {

				var hobbys = document.getElementsByName("hobby");

				var btn = document.getElementById("checkall");

				//原生for,推荐使用这一种

				/*

				for (var i = 0; i < hobbys.length; i++) {

					if (btn.checked) {

						hobbys[i].checked = true;

					} else {

						hobbys[i].checked = false;

					}

				}

				*/

				//使用foreach,使用HBuilderX,在内置的浏览器会报错,提示foreach不起作用

				//使用谷歌浏览器打开则没有问题,下面使用lambda也是如此情况,可能是HBuilder的bug

				hobbys.forEach(function(hobby) {

					//如果全选的是选中,则把全部设置为选中的状态,否则设置为未选中

					if (btn.checked) {

						hobby.checked = true;

					} else {

						hobby.checked = false;

					}

				});

				//使用lambda

				/*

				hobbys.forEach((hobby) => {

					console.log(hobby);

					if (btn.checked) {

						hobby.checked = true;

					} else {

						hobby.checked = false;

					}

				});

				*/

			}

			function selectRevese() {

				var hobbys = document.getElementsByName("hobby");

				for (var i = 0; i < hobbys.length; i++) {

					//设置为另外的状态

					hobbys[i].checked = !hobbys[i].checked;

				}

			}

		</script>

	</head>

	<body>

		<input type="checkbox" name="hobby">读书<br><br>

		<input type="checkbox" name="hobby">电影<br><br>

		<input type="checkbox" name="hobby">游戏<br><br>

		<input type="checkbox" name="hobby">游泳<br><br>

		<input type="checkbox" name="hobby">写代码<br><br>

		<input type="checkbox" id="checkall" onclick="selectAll()">全选 </input>

		<button type="button" onclick="selectRevese()">反选</button>

	</body>

</html>

Web前端——JavaScript练习的更多相关文章

  1. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  2. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  3. web前端+javascript+h5电子书籍和实战分享

    有很多前端伙伴们学习前端很多了,但是如何能成为优秀的程序员呢,前端必学的知识点相信学习前端的伙伴们心里都非常清楚.主要的三要素包括HTML.CSS和JavaScript.那么学好JavaScript是 ...

  4. web前端----JavaScript的DOM(三)

    一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in l ...

  5. web前端----JavaScript的BOM

    一.引入 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和 ...

  6. web前端----JavaScript(JS)简单介绍

    JavaScript(JS) 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...

  7. WEB前端--JavaScript

    JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...

  8. web前端----JavaScript的DOM（二）

    前面在DOM一中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele_p ...

  9. web前端----JavaScript对象

    简介: 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String.Math.Array.Date.RegExp都是Jav ...

  10. web前端----JavaScript(JS)函数

    函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...

随机推荐

  1. Windows下MinGW跨平台编译和使用log4cpp

    Log4cpp 是C++开源日志库,为 C++ 应用程序开发中提供了日志的追踪和调试功能,基于 LGPL 开源协议,移植自 java 的日志项目 log4j, 并在 api 上保持了一致性. 1. 环 ...

  2. Android GPS获取当前位置信息

    package com.example.gpstest; import org.apache.http.util.LangUtils; import android.content.Context; ...

  3. Android中使用JUnit测试

    package com.meritit.lottery.test; import java.util.List; import android.test.AndroidTestCase; import ...

  4. Adaptive device-initiated polling

    A method includes periodically sending a polling call to an enterprise system outside the firewall a ...

  5. 如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“项目-域名信息” http://www.mysite.com 不在以下 request 合法域名列表中

    报错如图 报错文字如下: 如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目,操作路径:“项目-域名信息” http://www.mysite.net 不在以下 request 合法域名列表中 ...

  6. 可视化利器 —— t-SNE（matlab toolbox 的使用与解释）

    t-SNE – Laurens van der Maaten(感谢学术男神们的无私开源) User_guide.pdf(用户指南) 1. tsne 函数 mappedX = tsne(X, label ...

  7. poj 2763 Housewife Wind(树链拆分)

    id=2763" target="_blank" style="">题目链接:poj 2763 Housewife Wind 题目大意:给定一棵 ...

  8. PO、VO、BO、DTO、POJO、DAO之间的关系

    J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候,三分钟就被人家满口的专业术语喷晕了,PO VO BO DTO POJO DAO,一大堆的就来了(听过老罗对这种现象的批判的朋 ...

  9. 好玩的WPF第四弹：用Viewport2DVisual3D实现3D旋转效果

    原文:好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https:// ...

  10. Delphi中的线程类 - TThread详解

    Delphi中的线程类 - TThread详解 2011年06月27日 星期一 20:28 Delphi中有一个线程类TThread是用来实现多线程编程的,这个绝大多数Delphi书藉都有说到,但基本 ...