Web前端——JavaScript练习

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() + '秒';

setTomeout(fn, 周期：豪秒): 周期只会执行一次
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练习的更多相关文章

Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
web前端+javascript+h5电子书籍和实战分享
有很多前端伙伴们学习前端很多了,但是如何能成为优秀的程序员呢,前端必学的知识点相信学习前端的伙伴们心里都非常清楚.主要的三要素包括HTML.CSS和JavaScript.那么学好JavaScript是 ...
web前端----JavaScript的DOM(三)
一.JS中for循环遍历测试 for循环遍历有两种第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for (var i in l ...
web前端----JavaScript的BOM
一.引入到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和 ...
web前端----JavaScript(JS)简单介绍
JavaScript(JS) 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...
WEB前端--JavaScript
JavaScript JavaScript基础一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...
web前端----JavaScript的DOM（二）
前面在DOM一中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作创建节点:var ele_a = document.createElement('a');添加节点:ele_p ...
web前端----JavaScript对象
简介: 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String.Math.Array.Date.RegExp都是Jav ...
web前端----JavaScript(JS)函数
函数函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...

随机推荐

Android 4.0新增Space及GridLayout初谈
Android 4.0的SDK已经发布,在众多的新增特性中,其中对开发者来说比较重要的特性之一,是新增的两种界面布局方式:Space和Gridlayout,它们跟以往Android版本的sdk有什么不 ...
Qt自定义弹窗屏蔽父窗口（QWidget设置setWindowModality(Qt::ApplicationModal);以后再show）
写Qt程序时遇到一个问题: Qt自带的弹窗功能单一,所以须要自己用ui设计弹窗的内容,这样弹窗就和普通窗口一样了,但问题是这个弹窗显示后父窗口还是活动的.网上找了很久找到了解决办法: Qt::Wind ...
java中的switch结构
switchkeyword的中文意思是开关.转换的意思,switch语句在条件语句中特别适合做一组变量相等的推断,在结构上比if语句要清晰非常多.switch语句的语法格式为:switch(表达式) ...
如何直接访问WEB-INF下列文件
<servlet> <servlet-name>HE</servlet-name> <jsp-file>/WEB-INF/u_member/Login. ...
[WPF疑难]ErrorTemplate显示与隐藏问题
原文:[WPF疑难]ErrorTemplate显示与隐藏问题 [WPF疑难]ErrorTemplate显示与隐藏问题周 ...
jquery mobile 笔记
1.navbar 相关 <nav data-role="navbar"> <ul> <li><a href="# ...
Code First 连接已有数据库
连接数据库生成结果并没有一个可视化界面(Model First有) 其他连接数据库之后,可以采用migration管理第一次add-migration XX ...
QRCode二维码生成方案及其在带LOGO型二维码中的应用（2）
原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 续前:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1) http://blog.csdn.net/johnsu ...
wpf border内部元素内边角溢出问题裁剪效果
效果图 <Grid> <Border BorderThickness=" BorderBrush="#3c4d72" CornerRadius=&quo ...
javascript高程笔记-------第四章变量、作用域和内存问题
首先JavaScript中的变量分为基本类型和引用类型. 基本类型就是保存在栈内存中的简单数据段,而引用类型指的是那些保存在堆内存中的对象. 1.参数传递 javascript中所有参数的传递都是值传 ...

Web前端——JavaScript练习

Js练习

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

鼠标滑动更改内容 onmouseover

时间自动更新

表单

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

随机推荐

热门专题