js小练习改成vue-day02

最新推荐文章于 2024-04-26 16:00:34 发布

菜狗二哈

最新推荐文章于 2024-04-26 16:00:34 发布

阅读量611

点赞数

本文链接：https://blog.csdn.net/linyiwwy/article/details/104919317

版权

题目1：有一个按钮，按钮上的文本是 “求点赞”，单击该按钮，按钮上的文本，改变为，”谢谢” 。每单击按钮，旁边的数字加1。
在这里插入图片描述
题目2：最初图片的宽度设置为100像素，每次单击图片的时候，让图片的宽度每次加10像素。

题目3、利用innerHTML、setTimeout/setInterval函数实现实时显示时间。
上代码
一，js实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h5>第一题：</h5>
		<button id="bt"onclick="like()">点赞</button><span id="sp">0</span></br>
		
		<h5>第二题：</h5>
		<img src="images/loveChild.jpg" width="100px" onclick="image()" id="im" /></br>
		
		<h5>第三题：</h5>
		现在时间为：<span id="sp2"></span>
		<script>
			function like(){
				document.getElementById("bt").innerHTML = "谢谢";
			var sp = document.getElementById("sp").innerHTML ;
			  var sp1 =  parseInt(sp);
			document.getElementById("sp").innerHTML = sp1+1;
				
			}
			
			var num =100;
			function image(){	
				num +=10
			 document.getElementById("im").style.width = num+"px";				
			}
			
			
				function currentTime(){
					var date = new Date();
					  var date1 = date.toLocaleString();
					var sp3 =  document.getElementById("sp2");
					sp3.innerHTML = date1
				}
				setInterval("currentTime()",1000)
		</script>
	</body>
</html>

运行效果如下
在这里插入图片描述
操作效果后：

二，vue实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<h2>vue改写</h2>
		<div id="app">
			<h5>第一题：</h5>
			<button id="bt" @click="like()">{{n1}}</button><span id="sp">{{n2}}</span></br>
			
			<h5>第二题：</h5>
			<img src="img/loveChild.jpg" width="100px" @click="image()" ref="im" /></br>
			
			<h5>第三题：</h5>
			现在时间为：{{n4}}<span ref="sp2"></span>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					n1: "点赞",
					n2:0,
					n3: 100,
					n4: ''
		
				},
				methods:{
					like: function(){		
							this.n1 = "谢谢",
							this.n2++					
						},
					image: function(){
						this.n3 +=10,
						this.$refs.im.style.width = this.n3+"px";
					    }
					
					},
			    mounted() {
					 let _this = this;
						 setInterval(function(){
						  _this.n4 =	new Date().toLocaleString()
						},1000)
					}
				
			})
			
		</script>
	</body>
</html>

运行效果：在这里插入图片描述
操作之后效果：

菜狗二哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小练习改成vue-day02

题目1：有一个按钮，按钮上的文本是 “求点赞”，单击该按钮，按钮上的文本，改变为，”谢谢” 。每单击按钮，旁边的数字加1。题目2：最初图片的宽度设置为100像素，每次单击图片的时候，让图片的宽度每次加10像素。题目3、利用innerHTML、setTimeout/setInterval函数实现实时显示时间。上代码一，js实现<!DOCTYPE html><htm...
复制链接

扫一扫