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

随机推荐

discuz数据库函数使用
6 Wcf使用Stream传输
1.创建service和client项目 service项目新建wcf服务文件 MediaService 和 IMediaService IMediaService 代码为 using System. ...
分类算法SVM（支持向量机)
支持向量机(Support Vector Machine ,SVM)的主要思想是:建立一个最优决策超平面,使得该平面两侧距离该平面最近的两类样本之间的距离最大化,从而对分类问题提供良好的泛化能力.对于 ...
oracle备份和升级数据库
同oracle用户登录数据库驻留server.例如,主文件夹/home./oracle.运行以下命令来执行备份操作. sqlplus /nolog connect /as sysdba sql> ...
ORACLE 11G在相同的linuxserver从实施例1满库到实例2上
早期的导出命令: [root@powerlong4 ~]# su - oracle [oracle@powerlong4 ~]$ export ORACLE_SID=pt1; [oracle@powe ...
if-then和if-then-else声明
1.使用if-then声明结构化命令,主要类型为if-then声明.if-then例如,下面的语句格式: if command then commands fi 假设你在使用其它编程语言的if-th ...
C# IDisposable接口的使用
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
js错误界面
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
.NET CORE EnvironmentVariable
.NET CORE System variables SETIn System variablese.g1:Variable name: ASPNETCORE_ENVIRONMENTVariable ...
WPF属性(一)依赖属性
原文:WPF属性(一)依赖属性依赖属性是一种可以自己没有值,并能通过使用Binding从数据源获得值的属性,拥有依赖属性的对象称为依赖对象,在传统开发中,一个对象所占用的内存在调用new操作符进行实 ...

Web前端——JavaScript练习

Js练习

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

鼠标滑动更改内容 onmouseover

时间自动更新

表单

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

随机推荐

热门专题