我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
前言
刚刚才开始看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里面慢慢学习，感觉前端挺有意思，风格自由，很多东西比安卓要有意思一些，但是学起来也感觉五花八门，很容易这边看一点，那边学一会，然后组合起来就不会写了，不过只要多练习，相信慢慢能写的好的。