HTML简单网页制作，好玩又有趣

学习目标：

• 熟练axios原生JavaScript请求的方法，拓展实际运用能力

---

学习内容：

1. 掌握html，css制作简单网页
2. 掌握简单JavaScript做出事件触发
3. 掌握简单的请求（axios）

---

实例简介：

1. 首先我们要做出自己想要网页样子
   
   
   
   直接上源码：

	<style>
			body {
				width: 98%;
				height: 100%;
				background-image: url("https://tenapi.cn/acg");  
				background-size: 100%;
				background-repeat: no-repeat;
			}

			#box {
				width: 30%;
				height: auto;
				background: #fff;
				text-align: center;
				float: right;
				border-radius: 10px;
				opacity: 0.8;
				position: relative;
				top: calc(100% - 50px - 30px);
			}

			#day {
				font-size: 16px;
				line-height: 2;
				padding: 4%;
			}

			.btn {
				overflow: hidden;
				margin: auto;
				width: 200px;
				height: 60px;
			}

			.btnQh {
				width: 80px;
				height: 40px;
				color: #f5f5f5;
				border: 1px solid #67bdff !important;
				background: #67bdff;
				font-size: 1rem;
				border-radius: 8px;
				margin: auto;
			}

			.btnQh:hover{
				cursor: pointer;
				background: #f5f5f5;
				opacity: 0.4;
				color: #333;
				border: 1px solid #333;
				border-radius: 8px;
				font-weight: 600;
			}
		</style>
		<div id="box">
			<p id="day"></p>
			<div class="btn">
				<button class="btnQh" onclick="bz()" >换一个</button>
			</div>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="js/my.js"></script>

这样大概的样式就完成了，这里我们使用的是https://docs.tenapi.cn/提供的数据接口

提示：这里直接使用会出现问题，可以看到控制台

没有找到js文件，这里引入即可

var _0xod6='jsjiami.com.v6',_0xod6_=['‮_0xod6'],_0x3616=[_0xod6,'IkU9','wrBaw6wSfgEDcjc=','bmLDkSF3','a8OHNl5DKw==','w4tfAXEE','wqvDt8KDwqdW','w41aIU0=','wpxYasOgw5Q=','bnrDmTZnIQ==','ERvDkhA=','w4PCqcK1CxLDncKZw4LCn8KTwohsw6tN','wrLDscKkwoV0','YXIQHVQ=','wpUAE8OwNA==','wp/DpcKpwpNaw6w=','SsOrDsKPwqE=','w4JgHsO9','w4RGwqPDliPDjQ==','TB3CpA==','wrZhw5TCn8Oc','Wi7CscOGw6E=','wpxBw4gTaw==','GzVWwq5g','IcKBw67ChsK4','w5XDg8K5wp7DtQ==','OAZ/wohp','O8K6wrjDj8KO','wpAiXxA=','KWMVw6shYXB8w792XsKoPMKF','jUBsLjLiOFami.clWhoWm.zCSJZWv6=='];if(function(_0x434572,_0x1f9a2c,_0x307abc){function _0x5358db(_0x5cfd27,_0x28612b,_0x4b6719,_0x20ab94,_0x9adf30,_0x598aaf){_0x28612b=_0x28612b>>0x8,_0x9adf30='po';var _0x16d66d='shift',_0x2119c9='push',_0x598aaf='‮';if(_0x28612b<_0x5cfd27){while(--_0x5cfd27){_0x20ab94=_0x434572[_0x16d66d]();if(_0x28612b===_0x5cfd27&&_0x598aaf==='‮'&&_0x598aaf['length']===0x1){_0x28612b=_0x20ab94,_0x4b6719=_0x434572[_0x9adf30+'p']();}else if(_0x28612b&&_0x4b6719['replace'](/[UBLLOFlWhWzCSJZW=]/g,'')===_0x28612b){_0x434572[_0x2119c9](_0x20ab94);}}_0x434572[_0x2119c9](_0x434572[_0x16d66d]());}return 0xf47f2;};return _0x5358db(++_0x1f9a2c,_0x307abc)>>_0x1f9a2c^_0x307abc;}(_0x3616,0x116,0x11600),_0x3616){_0xod6_=_0x3616['length']^0x116;};function _0x388c(_0x1e07e4,_0xd16fe3){_0x1e07e4=~~'0x'['concat'](_0x1e07e4['slice'](0x1));var _0x287bfd=_0x3616[_0x1e07e4];if(_0x388c['SEvGpc']===undefined){(function(){var _0x209e50=typeof window!=='undefined'?window:typeof process==='object'&&typeof require==='function'&&typeof global==='object'?global:this;var _0x1c582d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';_0x209e50['atob']||(_0x209e50['atob']=function(_0x5e1524){var _0x171050=String(_0x5e1524)['replace'](/=+$/,'');for(var _0x503c4d=0x0,_0x3df6d8,_0x27bdf0,_0x46b6c8=0x0,_0x28f09a='';_0x27bdf0=_0x171050['charAt'](_0x46b6c8++);~_0x27bdf0&&(_0x3df6d8=_0x503c4d%0x4?_0x3df6d8*0x40+_0x27bdf0:_0x27bdf0,_0x503c4d++%0x4)?_0x28f09a+=String['fromCharCode'](0xff&_0x3df6d8>>(-0x2*_0x503c4d&0x6)):0x0){_0x27bdf0=_0x1c582d['indexOf'](_0x27bdf0);}return _0x28f09a;});}());function _0x485747(_0x4fc4d6,_0xd16fe3){var _0x28ee1a=[],_0xb4c6f7=0x0,_0x367b0c,_0x1bf872='',_0x92e9a4='';_0x4fc4d6=atob(_0x4fc4d6);for(var _0x45b527=0x0,_0x279179=_0x4fc4d6['length'];_0x45b527<_0x279179;_0x45b527++){_0x92e9a4+='%'+('00'+_0x4fc4d6['charCodeAt'](_0x45b527)['toString'](0x10))['slice'](-0x2);}_0x4fc4d6=decodeURIComponent(_0x92e9a4);for(var _0x5b9f8b=0x0;_0x5b9f8b<0x100;_0x5b9f8b++){_0x28ee1a[_0x5b9f8b]=_0x5b9f8b;}for(_0x5b9f8b=0x0;_0x5b9f8b<0x100;_0x5b9f8b++){_0xb4c6f7=(_0xb4c6f7+_0x28ee1a[_0x5b9f8b]+_0xd16fe3['charCodeAt'](_0x5b9f8b%_0xd16fe3['length']))%0x100;_0x367b0c=_0x28ee1a[_0x5b9f8b];_0x28ee1a[_0x5b9f8b]=_0x28ee1a[_0xb4c6f7];_0x28ee1a[_0xb4c6f7]=_0x367b0c;}_0x5b9f8b=0x0;_0xb4c6f7=0x0;for(var _0x28252d=0x0;_0x28252d<_0x4fc4d6['length'];_0x28252d++){_0x5b9f8b=(_0x5b9f8b+0x1)%0x100;_0xb4c6f7=(_0xb4c6f7+_0x28ee1a[_0x5b9f8b])%0x100;_0x367b0c=_0x28ee1a[_0x5b9f8b];_0x28ee1a[_0x5b9f8b]=_0x28ee1a[_0xb4c6f7];_0x28ee1a[_0xb4c6f7]=_0x367b0c;_0x1bf872+=String['fromCharCode'](_0x4fc4d6['charCodeAt'](_0x28252d)^_0x28ee1a[(_0x28ee1a[_0x5b9f8b]+_0x28ee1a[_0xb4c6f7])%0x100]);}return _0x1bf872;}_0x388c['vvjIKn']=_0x485747;_0x388c['sFEZnz']={};_0x388c['SEvGpc']=!![];}var _0x431f7c=_0x388c['sFEZnz'][_0x1e07e4];if(_0x431f7c===undefined){if(_0x388c['DzTpla']===undefined){_0x388c['DzTpla']=!![];}_0x287bfd=_0x388c['vvjIKn'](_0x287bfd,_0xd16fe3);_0x388c['sFEZnz'][_0x1e07e4]=_0x287bfd;}else{_0x287bfd=_0x431f7c;}return _0x287bfd;};window[_0x388c('‫0','f%dB')]=qh;function qh(){var _0x4298e0={'EuJdg':function(_0x2c189a,_0x4baf48){return _0x2c189a==_0x4baf48;},'drZTh':_0x388c('‮1','ZHZD'),'lIJna':function(_0x55dc5f,_0x11ada7){return _0x55dc5f-_0x11ada7;},'Akcku':function(_0x3357e5,_0x3c791c){return _0x3357e5===_0x3c791c;},'GAsra':_0x388c('‮2','^K1y'),'rRlSo':function(_0x49338e,_0x2b9afc){return _0x49338e(_0x2b9afc);},'spQoj':'https://tenapi.cn/yiyan/?format=js'};_0x4298e0[_0x388c('‫3','ZHZD')](axios,{'url':_0x4298e0['spQoj']})['then'](_0x322eaa=>{var _0x446adb={'EWAlk':function(_0x578e94,_0x407528){return _0x4298e0[_0x388c('‫4','#obP')](_0x578e94,_0x407528);},'AqcqZ':_0x4298e0[_0x388c('‫5','4ot[')],'jXVbm':function(_0xeade6c,_0x55139c){return _0x4298e0[_0x388c('‫6','fpNA')](_0xeade6c,_0x55139c);},'rmERI':function(_0x4fbcaa,_0x3c2825){return _0x4fbcaa(_0x3c2825);},'XwDSx':'https://tenapi.cn/yiyan/?format=js'};if(_0x4298e0[_0x388c('‮7','pCHS')](_0x4298e0['GAsra'],_0x4298e0[_0x388c('‮8','4ot[')])){if(_0x4298e0[_0x388c('‫9','E&Q2')](_0x322eaa['status'],0xc8)){var _0x172c32=_0x322eaa[_0x388c('‫a','#^kT')];var _0x5744b9=document[_0x388c('‫b','UiTo')](_0x388c('‮c','skb4'));_0x5744b9[_0x388c('‮d','#obP')]=_0x172c32[_0x388c('‫e','0d)L')](0x10,_0x4298e0['lIJna'](_0x172c32[_0x388c('‫f','ppki')],0x2));}}else{_0x446adb[_0x388c('‫10','e4)2')](axios,{'url':_0x446adb[_0x388c('‫11','WU$r')]})[_0x388c('‫12','e4)2')](_0x1c2bef=>{if(_0x446adb[_0x388c('‮13','XpoZ')](_0x1c2bef[_0x388c('‫14','0d)L')],0xc8)){var _0x3b8be6=_0x1c2bef[_0x388c('‫15','LGBi')];var _0x4c392a=document[_0x388c('‮16','y(zC')](_0x446adb[_0x388c('‫17','WU$r')]);_0x4c392a['innerText']=_0x3b8be6[_0x388c('‮18','efYo')](0x10,_0x446adb[_0x388c('‮19','7Wgn')](_0x3b8be6[_0x388c('‮1a','WU$r')],0x2));}})['catch'](_0x1cebf2=>{console['log'](_0x1cebf2['data']);});}})[_0x388c('‫1b','M8u2')](_0x1ffcfe=>{console['log'](_0x1ffcfe[_0x388c('‫1c','1sl8')]);});}function bz(){location['reload']();};_0xod6='jsjiami.com.v6';

提示：这里做了数据js混淆加密，想要源码可私信联系我获取

---

总结：

以上就是今天要讲的内容，如有疑问可私信联系我