JavaScript的一些小练习

最新推荐文章于 2024-05-14 23:26:36 发布

阿木木的手套

最新推荐文章于 2024-05-14 23:26:36 发布

阅读量480

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_41974599/article/details/80089562

版权

一、灯泡开关

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>读取和改变对象属性 灯泡开关</title>
</head>
<body>
	<img src="./js-pic/on.jpg" alt="" οnclick="test()" />
</body>
<script>
	function test(){
		var img = document.getElementsByTagName("img")[0];
		//console.log(img);
		if(img.src.indexOf("on") > -1){
			img.src="./js-pic/off.jpg";
			}else{
				img.src="./js-pic/on.jpg";
				}
		}
</script>
</html>

二、修改字体的文字大小

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>修改字体大小</title>
</head>
<body>
<input type="button" value="大" οnclick="big();" />
<input type="button" value="中" οnclick="zho();" />
<input type="button" value="小" οnclick="xiao();" />
<p>去的尽管去了， 来的尽管来着； 去来的中间， 又怎样地匆匆呢？ 早上我起来的时候， 小屋里射进两三方斜斜的太阳。 太阳他有脚啊！ 轻轻悄悄地挪移了</p>
</body>
<script>
	function big(){
		var p=document.getElementsByTagName('p')[0];
		p.style.fontSize="25px";
		}
	function zho(){
		var p = document.getElementsByTagName("p")[0];
		p.style.fontSize="18px";
		}
	function xiao(){
		var p = document.getElementsByTagName("p")[0];
		p.style.fontSize="13px";
		}
</script>
</html>

三、暴力操作节点（只要能得到这个对象节点就可以向这个节点暴力插入数据）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>暴力操作节点</title>
</head>
<body>
	<input type="button" value="暴力修改" οnclick="bian();" />
	<ul></ul>
</body>
<script>
	var ul = document.getElementsByTagName("ul")[0];
	function bian(){
		ul.innerHTML = "<li>春天来了</li>"
		}
</script>
</html>

四、定时器功能（网页上的图片隔30秒换一次）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器功能</title>
</head>
<body>
	<img src="./js-pic/bom.jpg" />
</body>
<script>
	function bom(){
		var bom = document.getElementsByTagName("img")[0];
		bom.src="./js-pic/warn.jpg"
		}
		
		setTimeout("bom()",3000);
</script>
</html>

五、网页时钟

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页时钟</title>
</head>
<body>
	<input type="text" style="width"60px;height:30px;border:1px solid blue;" />
</body>
<script>
	function clock(){
		var date = new Date();
		var inp = document.getElementsByTagName("input")[0];
		var y = "    " + date.getFullYear();
				y = y + '/' + ( date.getMonth() + 1 ) + '/' ;
				y += date.getDate() + '  ' ;
				y += date.getHours() + ':' ;
				y += date.getMinutes() + ':' ;
				y += date.getSeconds();
				
				inp.value = y ;
					}
					
					clock();
					
					setInterval("clock();",1000);
</script>
</html>

阿木木的手套

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript的一些小练习

一、灯泡开关&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;读取和改变对象属性灯泡开关&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;img src="./js-pic/on.jpg
复制链接

扫一扫