渭南网站建设价格,网站手机端自适应,wordpress 函数,网站建设化学图片做了那么多年开发#xff0c;自学了很多门编程语言#xff0c;我很明白学习资源对于学一门新语言的重要性#xff0c;这些年也收藏了不少的Python干货#xff0c;对我来说这些东西确实已经用不到了#xff0c;但对于准备自学Python的人来说#xff0c;或许它就是一个宝藏…做了那么多年开发自学了很多门编程语言我很明白学习资源对于学一门新语言的重要性这些年也收藏了不少的Python干货对我来说这些东西确实已经用不到了但对于准备自学Python的人来说或许它就是一个宝藏可以给你省去很多的时间和精力。
别在网上瞎学了我最近也做了一些资源的更新只要你是我的粉丝这期福利你都可拿走。
我先来介绍一下这些东西怎么用文末抱走。 1Python所有方向的学习路线新版
这是我花了几天的时间去把Python所有方向的技术点做的整理形成各个领域的知识点汇总它的用处就在于你可以按照上面的知识点去找对应的学习资源保证自己学得较为全面。
最近我才对这些路线做了一下新的更新知识体系更全面了。 2Python学习视频
包含了Python入门、爬虫、数据分析和web开发的学习视频总共100多个虽然没有那么全面但是对于入门来说是没问题的学完这些之后你可以按照我上面的学习路线去网上找其他的知识资源进行进阶。 3100多个练手项目
我们在看视频学习的时候不能光动眼动脑不动手比较科学的学习方法是在理解之后运用它们这时候练手项目就很适合了只是里面的项目比较多水平也是参差不齐大家可以挑自己能做的项目去练练。 4200多本电子书
这些年我也收藏了很多电子书大概200多本有时候带实体书不方便的话我就会去打开电子书看看书籍可不一定比视频教程差尤其是权威的技术书籍。
基本上主流的和经典的都有这里我就不放图了版权问题个人看看是没有问题的。
5Python知识点汇总
知识点汇总有点像学习路线但与学习路线不同的点就在于知识点汇总更为细致里面包含了对具体知识点的简单说明而我们的学习路线则更为抽象和简单只是为了方便大家只是某个领域你应该学习哪些技术栈。 6其他资料
还有其他的一些东西比如说我自己出的Python入门图文类教程没有电脑的时候用手机也可以学习知识学会了理论之后再去敲代码实践验证还有Python中文版的库资料、MySQL和HTML标签大全等等这些都是可以送给粉丝们的东西。 这些都不是什么非常值钱的东西但对于没有资源或者资源不是很好的学习者来说确实很不错你要是用得到的话都可以直接抱走关注过我的人都知道这些都是可以拿到的。
网上学习资料一大堆但如果学到的知识不成体系遇到问题时只是浅尝辄止不再深入研究那么很难做到真正的技术提升。
需要这份系统化学习资料的朋友可以戳这里获取
一个人可以走的很快但一群人才能走的更远不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子技术交流、学习资源、职场吐槽、大厂内推、面试辅导让我们一起学习成长
如果你看到我们的播放器结构你会注意到我们有很多hide元素的类。此类hide指示元素将在最小化视图中隐藏。我们为所有元素提供了相同的类因此我们可以轻松地在 CSS 中设置它们的样式。
.music-player-section{
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
background: var(–alpha-color);
backdrop-filter: blur(50px);
transition: 1s;
}
.music-seek-bar{
-webkit-appearance: none;
width: 100%;
position: absolute;
top: -4px;
height: 8px;
background: var(–secondary-color);
overflow: hidden;
}
.music-seek-bar::-webkit-slider-thumb{
-webkit-appearance: none;
height: 10px;
width: 5px;
background: var(–primary-color);
cursor: pointer;
box-shadow: -400px 0 0 400px var(–primary-color);
}
.current-song-name{
font-weight: 300;
font-size: 20px;
text-align: center;
margin-top: 5px;
text-transform: capitalize;
}
.controls{
position: relative;
width: 80%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
font-size: 30px;
}
.controls span{
display: none;
opacity: 0;
transition: 1s;
}
.music-player-section.active .controls{
justify-content: space-between;
}
.music-player-section.active .controls span{
font-size: 25px;
display: block;
opacity: 0.5;
}
.music-player-section.active .controls span.active{
color: var(–primary-color);
opacity: 1;
}
.controls .main i{
margin: 0 5px;
display: none;
}
.controls .main i.active{
display: inline;
}
现在让我们创建最大化视图的样式。
.music-player-section .hide{
display: none;
opacity: 0;
transition: 1s;
}
.music-player-section.active .hide{
display: block;
opacity: 1;
}
.music-player-section.active{
width: 100%;
height: 100%;
padding: 30px;
display: flex;
flex-direction: column;
}
.music-player-section.active .music-seek-bar{
position: relative;
display: block;
border-radius: 50px;
margin: auto;
}
.music-player-section.active .current-song-name{
font-size: 40px;
}
.music-player-section.active .controls{
width: 100%;
font-size: 50px;
}
.artist-name{
text-align: center;
font-size: 20px;
text-transform: capitalize;
}
.cover{
width: 30vh;
height: 30vh;
object-fit: cover;
margin: auto;
border-radius: 20px;
box-shadow: var(–shadow);
}
.current-time{
position: absolute;
margin-top: 5px;
left: 30px;
}
.duration{
position: absolute;
margin-top: 5px;
right: 30px;
}
.icon{
position: absolute;
top: 60px;
transform: scale(1.3);
}
.back-btn{
left: 40px;
}
.nav-btn{
right: 40px;
}
/* volume button */
.volume-slider{
-webkit-appearance: none;
width: 100px;
height: 40px;
position: absolute;
right: -35px;
bottom: 80px;
transform: rotate(-90deg);
border-radius: 20px;
background: var(–alpha-color);
overflow: hidden;
opacity: 0;
display: none;
}
.volume-slider.active{
opacity: 1;
display: block;
}
.volume-slider::-webkit-slider-thumb{
-webkit-appearance: none;
height: 40px;
width: 10px;
background: var(–primary-color);
box-shadow: -200px 0 1px 200px var(–primary-color);
}
输出 并检查这些样式现在像这样将active添加到 class music-player-section 中去。 …
输出 我们最终会让这个播放器发挥作用。现在从player section类删除这个active。让我们创建播放列表部分。 playlist-section 播放列表部分 播放列表 song 1
// 7
CSS
.playlist{
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: -100%;
padding: 30px 0;
background: var(–background);
z-index: 3;
transition: 1s;
overflow: auto;
}
.playlist.active{
right: 0;
}
.title{
font-weight: 300;
font-size: 40px;
text-align: center;
margin-top: 15px;
text-transform: capitalize;
margin-bottom: 30px;
}
.queue{
width: 100%;
height: 80px;
padding: 0 30px;
display: flex;
align-items: center;
border-top: 2px solid var(–alpha-color);
}
.queue-cover{
width: 60px;
height: 60px;
border-radius: 10px;
overflow: hidden;
margin-right: 20px;
position: relative;
}
.queue-cover img{
width: 100%;
height: 100%;
object-fit: cover;
}
.queue-cover i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: var(–primary-color);
display: none;
}
.queue.active i{
display: block;
}
.queue .name{
font-size: 22px;
text-transform: capitalize;
}
输出 我们已经完成了所有的造型。active也从播放列表部分删除类。
现在让我们 JS 使这个音乐应用程序功能齐全。
✨ navigation 导航部分 我们的音乐播放器中有三个部分。因此为这个应用程序设置导航系统对我们来说非常重要。通过它我们可以轻松地从一个部分导航到另一个部分。对所以编码这个。
/导航
切换音乐播放器
const musicPlayerSection document.querySelector(‘.music-player-section’);
let clickCount 1;
musicPlayerSection.addEventListener(‘click’, () {
if(clickCount 2){
musicPlayerSection.classList.add(‘active’);
clickCount 1;
return;
}
clickCount;
setTimeout(() {
clickCount 1;
}, 250);
})
/// 从音乐播放器返回
const backToHomeBtn document.querySelector(‘.music-player-section .back-btn’);
backToHomeBtn.addEventListener(‘click’, () {
musicPlayerSection.classList.remove(‘active’);
})
/// 访问播放列表
const playlistSection document.querySelector(‘.playlist’);
const navBtn document.querySelector(‘.music-player-section .nav-btn’);
navBtn.addEventListener(‘click’, () {
playlistSection.classList.add(‘active’);
})
// 从播放列表返回到音乐播放器
const backToMusicPlayer document.querySelector(‘.playlist .back-btn’);
backToMusicPlayer.addEventListener(‘click’, () {
playlistSection.classList.remove(‘active’);
})
//导航完成
这是基本的 JS我还在代码中添加了注释。因此如果您对此代码有任何疑问请随时在讨论中问我。我们的导航完成了。所以让我们创建我们的音乐播放器。 music 音乐部分 对于音乐播放器我们的页面中需要一个音频源但现在我们没有。为此在 index.html 中创建一个音频元素。在 body 标记的开头创建此元素。 现在我们必须创建很多函数所以在开始之前让我们快速选择我们可能需要进行操作的所有元素。
/// 音乐
let currentMusic 0;
const music document.querySelector(‘#audio-source’);
const seekBar document.querySelector(‘.music-seek-bar’);
const songName document.querySelector(‘.current-song-name’);
const artistName document.querySelector(‘.artist-name’);
const coverImage document.querySelector(‘.cover’);
const currentMusicTime document.querySelector(‘.current-time’);
const musicDuration document.querySelector(‘.duration’);
const queue […document.querySelectorAll(‘.queue’)];
// 在此处选择所有按钮
const forwardBtn document.querySelector(‘i.fa-forward’);
const backwardBtn document.querySelector(‘i.fa-backward’);
const playBtn document.querySelector(‘i.fa-play’);
const pauseBtn document.querySelector(‘i.fa-pause’);
const repeatBtn document.querySelector(‘span.fa-redo’);
const volumeBtn document.querySelector(‘span.fa-volume-up’);
const volumeSlider document.querySelector(‘.volume-slider’);
现在设置音乐源。
// 音乐设置功能
const setMusic (i) {
seekBar.value 0;
let song songs[i];
currentMusic i;
music.src song.path;
songName.innerHTML song.name;
artistName.innerHTML song.artist;
coverImage.src song.cover;
setTimeout(() {
seekBar.max music.duration;
musicDuration.innerHTML formatTime(music.duration);
}, 300);
currentMusicTime.innerHTML ‘00 : 00’;
queue.forEach(item item.classList.remove(‘active’));
queue[currentMusic].classList.add(‘active’);
}
setMusic(0);
你可以注意到为了设置持续时间我们调用了formatTime现在创建这个。
// 格式持续时间为 00 : 00 格式
const formatTime (time) {
let min Math.floor(time / 60);
if(min 10){
min 0 min;
}
let sec Math.floor(time % 60);
if(sec 10){
sec 0 sec;
}
return ${min} : ${sec};
}
现在让我们添加播放/暂停事件。
// playBtn 点击事件
playBtn.addEventListener(‘click’, () {
music.play();
playBtn.classList.remove(‘active’);
pauseBtn.classList.add(‘active’);
})
// pauseBtn 点击事件
pauseBtn.addEventListener(‘click’, () {
music.pause();
pauseBtn.classList.remove(‘active’);
playBtn.classList.add(‘active’);
})
我们已经完成了音乐的设置和播放/暂停。现在进行向前/向后事件。
// 向前按钮
forwardBtn.addEventListener(‘click’, () {
if(currentMusic songs.length - 1){
currentMusic 0;
} else{
currentMusic;
}
setMusic(currentMusic);
playBtn.click();
})
// 后退按钮
backwardBtn.addEventListener(‘click’, () {
if(currentMusic 0){
currentMusic songs.length - 1;
} else{
currentMusic–;
}
setMusic(currentMusic);
playBtn.click();
})
快完成了现在创建搜索栏功能。
// 搜索栏事件
setInterval(() {
seekBar.value music.currentTime;
currentMusicTime.innerHTML formatTime(music.currentTime);
if(Math.floor(music.currentTime) Math.floor(seekBar.max)){
if(repeatBtn.className.includes(‘active’)){
setMusic(currentMusic);
playBtn.click();
} else{
forwardBtn.click();
}
}
}, 500)
seekBar.addEventListener(‘change’, () {
music.currentTime seekBar.value;
})
做了这个之后。创建刷新功能和音量选项。
// 刷新按钮
repeatBtn.addEventListener(‘click’, () {
repeatBtn.classList.toggle(‘active’);
一、Python所有方向的学习路线
Python所有方向的技术点做的整理形成各个领域的知识点汇总它的用处就在于你可以按照下面的知识点去找对应的学习资源保证自己学得较为全面。 二、Python必备开发工具
工具都帮大家整理好了安装就可直接上手
三、最新Python学习笔记
当我学到一定基础有自己的理解能力的时候会去阅读一些前辈整理的书籍或者手写的笔记资料这些笔记详细记载了他们对一些技术点的理解这些理解是比较独到可以学到不一样的思路。 四、Python视频合集
观看全面零基础学习视频看视频学习是最快捷也是最有效果的方式跟着视频中老师的思路从基础到深入还是很容易入门的。 五、实战案例
纸上得来终觉浅要学会跟着视频一起敲要动手实操才能将自己的所学运用到实际当中去这时候可以搞点实战案例来学习。
六、面试宝典 简历模板
网上学习资料一大堆但如果学到的知识不成体系遇到问题时只是浅尝辄止不再深入研究那么很难做到真正的技术提升。
需要这份系统化学习资料的朋友可以戳这里获取
一个人可以走的很快但一群人才能走的更远不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子技术交流、学习资源、职场吐槽、大厂内推、面试辅导让我们一起学习成长
