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. DDD实战6 单元测试

    1.在Products解决方案文件夹下面新建一个项目 一个单元测试项目 Product.Tests.

  2. keras 的使用

    theano 以及 TensorFlow 是 keras 的 backend(后端支持),因此,keras 本质上是对 thenao 或者 TensorFlow 的进一步封装(wrapper). ke ...

  3. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object 版权声明:本文为博主原创文章,未经博主允许不得转载. ht ...

  4. 汉顺平html5课程分享：6小时制作经典的坦克大战！

    记起自己去年參加的一次面试,在做过Java多年的面试官面前发挥的并不好,但他一听说我会html5,立刻眼睛发亮.无论不顾的想要和我签约.. .所以.如今为工作犯愁的朋友们,学好html5,绝对会为你找 ...

  5. .NET 上传并解析CSV文件存库

    1.前端: 放置浏览按钮 <div class="row inner_table text-center"> <input id="fileId&quo ...

  6. BZOJ 3594 Scoi2014 方波波麦田 树阵

    标题效果:给定一个序列,能够选择k次每个部分的数量和在范围内+1,寻求操作后LIS最大值 我的做法是不是一个标准的解决方案. ..5E为什么跑飞的复杂性. . . 首先,显而易见的结论是,我们选择k右 ...

  7. style的继承

    第一种方式:瞄准控件的基类 如下例所示,继承ContentControl的控件,都可以使用这个Style <Window.Resources> <Style x:Key=" ...

  8. 读BeautifulSoup官方文档之html树的打印

    prettify()能返回一个格式良好的html的Unicode字符串 : markup = '<a href="http://example.com/">I link ...

  9. CORS 专题

    CORS(跨域资源共享,Cross-Origin Resource Sharing)CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web ...

  10. Android adb shell 无法启动:insufficient permissions for device

    解决办法1:lsusb查看vendorId号,然后在/etc/udev/rules.d/目录下增加(或修改)51-android.rules文件.增加一条记录:SUBSYSTEM=="usb ...