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 ...

随机推荐

.net命名空间和程序集详解
命名空间是一种用于将逻辑上相似的类按层次结构分组的机制.这种机制防止了命名冲突.在这种结构化采用被点号"."分隔的单词来实现.通常最顶层的命名空间是System,例如System; ...
CSS动作
5.过渡 tansition (由一个状态过渡到另外一个状态的过程) transition 过渡参数1: ...
推断（inference）、贝叶斯规则（Bayes's rule）与导出分布（derived distribution）
1. 建模对原始信号 X 进行观测,观测可以抽象为(离散:PY|X(y|x), 连续:fY|X(y|x)),物理世界噪声的存在,将导致观测到的 X 出现一定的噪声,记为 Y: X⇒fY|X(y|x) ...
what is the difference between definition and declaration in c
A declaration introduces an identifier and describes its type, be it a type, object, or function. A ...
Python缺乏调查的陷阱动态实例属性、引用、逃生
--看到哪里.想到哪里,记到哪里非常多时候.非常多人学python的时候,会忽略的东西非常多.大多数都盯着能"出货"即可,可是通常在读别人的代码的时候发现,看不懂...一方面是自 ...
matplotlib简单的新手教程和动画
做数据分析,首先是要熟悉和理解数据,所以掌握一个趁手的可视化工具是很重要的,否则对数据连个主要的感性认识都没有,怎样进行下一步的design 点击打开链接还有一个非常棒的资料 Matplotlib ...
WPF Timeline简易时间轴控件的实现
原文:WPF Timeline简易时间轴控件的实现效果图: 由于整个控件是实现之后才写的教程,因此这里记录的代码是最终实现后的,前后会引用到其他的一些依赖属性或者代码,需要阅读整篇文章. 1.确定T ...
javascript-DOM学习
javascript-DOM学习 DOM document(html) object modle document对象(DOM核心对象) dom能用来干什么? 对html元素的样式(颜色.大小.位置等 ...
微信红包功能(含示例demo)
开通支付权限登录微信公众平台管理后台,找到“微信支付”一栏,进行开通会跳转到“微信支付商户平台”,根据提示提交相关证明,完成支付权限的开通开通之后,“微信支付”一栏会显示相关信息,在“开发-接口权限 ...
Bootstrap 固定在顶部导航条
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...

Web前端——JavaScript练习

Js练习

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

鼠标滑动更改内容 onmouseover

时间自动更新

表单

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

随机推荐

热门专题