个人网页的Javascript代码

最新推荐文章于 2024-08-30 15:44:43 发布

文刀星

最新推荐文章于 2024-08-30 15:44:43 发布

阅读量1.5k

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_57130283/article/details/128984261

版权

该代码段使用JavaScript实现了音乐播放与暂停功能，通过控制变量判断音乐状态，并改变音乐图标动画。同时，它包含页面滚动时导航栏的固定定位效果，以及鼠标悬停显示隐藏元素的功能。此外，还有一个文字渐显的效果。

摘要由CSDN通过智能技术生成

这个就是代码

// 动画旋转
var music = document.getElementById('music')    //获取音乐
var musics = document.getElementById('musics')   //获取音乐图标
var tem = true  //设置一个变量，用来控制音乐是否在播放。

//定义一个函数，当用户单击的时候触发这个函数，从而实现音乐的暂停与播放。
function button(){
	//tem用来控制音乐当前是否在播放。true代表音乐正在播放，false代表音乐当前正在处于暂停的状态。
	if(tem == false){
		music.play()  //播放音乐
		tem = true  
		document.getElementById('musics').style.animationPlayState = 'running'  //播放音乐图标
	}else{
		music.pause()  //暂停音乐
		tem = false
		document.getElementById('musics').style.animationPlayState = 'paused'  //暂停音乐图标
	}
}

let nav = document.querySelector('.nav')
    let header = document.querySelector('.header')
    // 1. 页面滚动事件
    window.addEventListener('scroll', function () {
        if (document.documentElement.scrollTop >= nav.offsetTop) {
            header.style.top = '0'
        } else {
            header.style.top = '-15%' //否则返回位置
        }
    })

window.onload = function(){
    var QR = document.getElementById("QR"); //需要悬浮的选项，这里需要同步你的标签id或class名称
    var QR1 = document.getElementById("QR1"); //需要隐藏的div
    QR1.style.display = "none";
    QR1.onmouseover = QR.onmouseover = function(){
        if(timer) clearTimeout(timer)
        QR1.style.display = "block";
    }
    QR1.onmouseout = QR.onmouseout = function(){
            
        timer = setTimeout(function(){
            QR1.style.display = "none";
        },10);
    }
}

var text = "欢迎来到文刀星的个人空间！！！";
var num = text.length;

var i =0;
function show() {
    var shower = text.substr(0,i);
    document.getElementById("text").innerHTML = shower;
    i++;
    if(i + 1 >= num){
        clearInterval("done");
    }
}
var done=setInterval("show()",200);