我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛
前言
刚刚才开始看web开发,看到js基础有切换图片的代码,学习了一下,找了两张图片来试验一下,发现可行,于是便上传到码上掘金了,也算是交作业了。
正篇
实现过程
首先,我们先写好HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.google.com/specimen/ZCOOL+KuaiLe" rel="stylesheet" type="text/css">
<title>RabbitPlus</title>
</head>
<h1>兔年大吉</h1>
<p></p>
<body>
<img src="https://img0.baidu.com/it/u=3553655242,4084834626&fm=253&fmt=auto&app=138&f=JPEG?w=770&h=500" alt="Rabbit Year image">
</body>
</html>
复制代码
初学,所以都不熟练,只能简单的写了个标题和图片进去,然后我们在添加CSS样式:
h1,
p,
body {
color: red;
text-align: center;
}
复制代码
就对相关有内容的地方加了颜色和居中,最后是我们的JS:
let myP = document.querySelector('p');
myP.textContent = '鸿运当头';
let myImage = document.querySelector('img');
myImage.onclick = function() {
let mySrc = myImage.getAttribute('src');
if(mySrc === 'https://img0.baidu.com/it/u=3553655242,4084834626&fm=253&fmt=auto&app=138&f=JPEG?w=770&h=500') {
myImage.setAttribute('src', 'http://img2.baidu.com/it/u=2316453795,578025214&fm=253&app=138&f=JPEG?w=770&h=500');
} else {
myImage.setAttribute('src', 'https://img0.baidu.com/it/u=3553655242,4084834626&fm=253&fmt=auto&app=138&f=JPEG?w=770&h=500');
}
}
复制代码
看到MDN里面的JS基础中举例,使用onclick方法对对象myImage进行判断是否相同,不同使用myImage对象的setAttribute方法去重新设置图片内容src,从而起到点击图片就切换的效果。
效果展示
最终效果如下:
总结
掘金的码上掘金之前一直就想试着写点东西上去,但是奈何我完全不会写这些代码,如今在MDN里面慢慢学习,感觉前端挺有意思,风格自由,很多东西比安卓要有意思一些,但是学起来也感觉五花八门,很容易这边看一点,那边学一会,然后组合起来就不会写了,不过只要多练习,相信慢慢能写的好的。