html5使用 jsencrypt html javascript

转载

mob6454cc623087 2024-03-11 08:14:51

文章标签 html5使用 jsencrypt HTML html 赋值 文章分类 HTML5 移动开发

HTML JavaScript

文章目录

HTML JavaScript

JavaScript简介

DOM 与 JavaScript 的关系

JavaScript 使用
JavaScript 函数和事件

代码练习
结果

JavaScript简介

JavaScript 是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。

JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。

JavaScript 能够改变 HTML 样式 (CSS)
改变 HTML 元素的样式，是改变 HTML 属性的一个变种,实例：

document.getElementById("demo").style.fontSize = "25px";

JavaScript 能够隐藏 HTML 元素
可通过改变 display 样式来隐藏 HTML 元素,实例：

document.getElementById("demo").style.display="none";

JavaScript 能够显示 HTML 元素
可通过改变 display 样式来显示隐藏的 HTML 元素,实例:

document.getElementById("demo").style.display="block";

DOM 与 JavaScript 的关系

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树

html5使用 jsencrypt html javascript_html5使用 jsencrypt

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

JavaScript 使用

在 HTML 中，JavaScript 代码必须位于标签之间。
实例

<script>
	document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。
例如，当发生事件时调用函数，比如当用户点击按钮时。

代码练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="测试" onclick="test()"/>
		<input type="button" value="加法" onclick="add(6,7)"/>
		<input type="button" value="测试2" onclick="test2()"/>
		<input type="button" value="数据类型" onclick="dataType()"/>
		<input type="button" value="DOM测试" onclick="domTest()"/>
		<input type="button" value="Date测试" onclick="dateTest()"/>
		<input type="button" value="消失" onclick="hideTest()"/>
		<input type="button" value="显示" onclick="showTest()"/>
		
		<div id="myTime">
			<button onclick="showTime()">显示时间</button>
		</div>
		
		<div id="myDom">
			用户名：<input type="text" id="username"/>
			<font id="myFont"color="red">你好呀</font>			
		</div>
		
	</body>
	<script>
		function test(){
			alert('调用了js函数...')
		}
		
		function add(a,b){
			alert(a+b)
		}
		
		function test2(){
			var str="你好";
			alert(str+3); //str*3显示 NAN(Not A Number) JS通过赋值确定数据类型
		}
		
		function dataType(){
			//JS数组是动态数组 长度可变
			var arr=[1,2,3,4];
			arr[4]=5;
			//alert(arr[4]);
			
			var jsObj={name:"lizq",age:28,sex:"男",good:true};
			//alert(jsObj);
			
			//typeof() 用来测试js的数据类型
			//alert(typeof(arr));
			
			var a=3;	//number类型
			var str="你好";	//string
			//alert(typeof(a));
			//alert(typeof(str));
		}
		
		function showTime(){
			var dateTime=new Date(); //使用浏览器的时区并将当前时间、日期显示为全文本字符串
			//把时间显示到div
			alert(dateTime);
			//innerHTML 2种用法 不赋值就显示原有的值，如果赋值就覆盖原有值
			//document.getElementById("myTime").innerHTML=dateTime;
		}
		
		//每隔一段时间调用某个函数
		setInterval("showTime()",2000); //按照指定的周期（以毫秒计）来调用函数或计算表达式
		
		function domTest(){
			//获取myDom Div
			var myDom=document.getElementById("myDom");
			//alert(myDom);
			var inHtml=myDom.innerHTML; //所有html标签
			//alert(inHtml);
			var inText=myDom.innerText; //html中的文本
			//alert(inText);
			//myDom.innerHTML="<font color='red'>动态改变</font>";
			//使用value获取元素中的值
			var myText=document.getElementById("username");
			//alert(myText.value);
			//myText.value="值被改变了"
		}
		
		function dateTest(){
			var date=new Date();
			var year=date.getFullYear() //yyyy
			var month=date.getMonth() //[0,11]
			var day=date.getDate() //[1,31]
			var week=date.getDay() //[0,6]
			var hour=date.getHours() //[0,23]
			var min=date.getMinutes() //[0,59]
			var second=date.getSeconds() //[0,59]
			var time=year+'-'+(month+1)+'-'+day+' '+hour+':'+min+':'+second;
			alert(time);
		}
		
		function hideTest(){
			document.getElementById("myDom").style.display="none" //id="myDom"的div消失	
		}
		
		function showTest(){
			document.getElementById("myDom").style.display="block" //id="myDom"的div消失	
		}
		
	</script>
</html>