html之js-1-CSDN博客

本文链接：https://blog.csdn.net/JC_RainBow/article/details/40003883

今天开始学习javascript感觉有很多需要总结的，下面是我今天课余时间学习js的心得。

实例1的实现代码很简单，在开始的时候先附上代码：

<!--实践驱动模型
  - 当点击按钮就触动事件响应，弹出消息框alert("写入你要提示的内容");
-->

<html>
<head>
<!--显示html效果-->
<style>
body{
	margin:20px;
	font-family: "Verdana";
	font-size: 20px;
	background-color:#eee;
}
</style>
</head>
<body οnlοad="init()">
	<p>
		<label for="toClick">please click the button:</label>
		<input id="toClick" type="button" value="click me" />
	</p>
</body>
</html>
<script type="text/javascript" language="javascript">
function init(){
	var button = document.getElementById('toClick');
	button.onclick = function(){
		alert("hello world");
	}
}
</script>

实现的效果是点击按钮，然后触发js发生响应。主要的函数alert();

2.点击控件，修改某一个id的值，主要的语句：

function myFunc(){
		x = document.getElementById("demo");
		x.innerHTML = "asdfasdf";
	}

<innerHTML这个可以实现标签的值修改>

3.点击图片，动态转换，主要代码：src.match("")

<html>
<head>
	<title> main </title>
</head>
<script type="text/javascript" language="javascript">
	function appleClick(){
		var x = document.getElementById("apple");
		if(x.src.match("../apple/apple_03.png")){
			x.src = "../apple/apple_01.png";
		}
		else{
			x.src = "../apple/apple_03.png";
		}
	}
</script>
<body>
	<image src="../apple/apple_03.png" id="apple" οnclick="appleClick()" />
</body>
</html>

还有最重要的，地址路径的获取，上面那个写法是相对地址。

4.修改文本框中的值，和判断如果非整数，弹出提示框isNaN()：

<!DOCTYPE html>
<head>
	<title> title </title>
</head>
<script type="text/javascript">
	function clickCheck(){
		var x = document.getElementById("mainT").value;
		if(x == "" || isNaN(x)){
			alert("input error");
			document.getElementById("mainT").value = 0;
		}
	}
</script>
<body>
	<p>please input a integer else input error:</p>
	<input type="text" id="mainT" />
	<button type="button" id="buttonT" οnclick="clickCheck()">submit</button>
</body>
</html>

最后请看完的你指出自己的宝贵意见，让我们共同进步吧！！！