精华内容
下载资源
问答
  • window原生js跳转页面

    2020-08-17 15:04:19
    // 这是返回上一页 window.history.go(-1); window.history.back(); // 这是跳转页面 window.location.herf = '跳转的地址'
    // 这是返回上一页
    window.history.go(-1);
    window.history.back();
    // 这是跳转页面
    window.location.herf = '跳转的地址'
    
    展开全文
  • //切换或刷新页面音轨补偿,1s后开始补偿 setTimeout ( function ( ) { //如果发现本地有存储,则进行音轨补偿 if ( localStorage . getItem ( 'bgm_time' ) != null ) { bgm . currentTime = ...

    效果:
    在这里插入图片描述
    html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>TTT</title>
    	<link rel="stylesheet" href="index.css">
    </head>
    <body>
    	<div class="music">
    		<div class="bgm_text"></div>
    		<div class="bgm_btn">
    			<span class="bgm_btn_play">播放</span>
    			<span class="bgm_btn_stop">暂停</span>
    			<span class="bgm_btn_next">下一首</span>
    			<span class="bgm_btn_rest">重置</span>
    		</div>
    		<audio value="1" id="bgm" controls></audio>
    	</div>
    	<script src="index.js"></script>
    </body>
    </html>
    

    css代码:

    body{
    	background-image:url(image/bg.jpg);
    	background-size:cover;
    	background-repeat:no-repeat;
    	background-attachment:fixed;
    }
    .music{
    	position:fixed;
    	top:50vh;
    }
    .bgm_text{
    	color:#F5DEB3;
    	text-align:center;
    	margin-bottom:10px;
    }
    .bgm_btn{
    	
    }
    .bgm_btn>span{ 
    	cursor:pointer;
    	display:block;
    	margin-bottom:10px;
    	color:#FFA500;
    }
    .bgm_btn>span:nth-child(1){
    	
    }
    .bgm_btn>span:nth-child(2){
    	
    }
    .bgm_btn>span:nth-child(3){
    	
    }
    .bgm_btn>span:nth-child(4){
    	
    }
    .bgm_btn>span:hover{
    	color:white;
    }
    #bgm{
    	display:none;
    }
    

    js代码:

    window.onload=function(){
    	var bgm_text=document.querySelector('.bgm_text');
    	var bgm_btn_play=document.querySelector('.bgm_btn_play');
    	var bgm_btn_stop=document.querySelector('.bgm_btn_stop');
    	var bgm_btn_next=document.querySelector('.bgm_btn_next');
    	var bgm=document.getElementById('bgm');
    	//播放暂停
    	bgm_btn_play.onclick=function(){
    		bgm.play();
    	}
    	bgm_btn_stop.onclick=function(){
    		bgm.pause();
    	}
    	if(localStorage.getItem('bgm_gds')!=null){
    		bgm.setAttribute('value',localStorage.getItem('bgm_gds'));
    		bgm.innerHTML='<source src="bgm/'+localStorage.getItem('bgm_gds')+'.mp3" type="audio/mpeg">';
    		bgm_text.innerHTML='当前播放第'+localStorage.getItem('bgm_gds')+'首歌曲';
    	}else{
    		bgm.setAttribute('value',1);
    		bgm.innerHTML='<source src="bgm/1.mp3" type="audio/mpeg">';
    		bgm_text.innerHTML='当前播放第1首歌曲';
    	} 
    	//下一首
    	bgm_btn_next.onclick=function(){
    		var bgm_gds=bgm.getAttribute('value');
    		if(bgm_gds<4){
    			bgm_gds++;
    		}else{
    			bgm_gds=1;
    		}
    		bgm.innerHTML='<source src="bgm/'+bgm_gds+'.mp3" type="audio/mpeg">';
    		bgm_text.innerHTML='当前播放第'+bgm_gds+'首歌曲';
    		bgm.load();
    		bgm.play();
    		bgm.setAttribute('value',bgm_gds);
    		localStorage.setItem('bgm_gds',bgm_gds);
    	}
    	bgm.onended=function(){
    		bgm_btn_next.click();
    	};
    	//重置
    	var bgm_btn_rest=document.querySelector('.bgm_btn_rest');
    	bgm_btn_rest.onclick=function(){
    		bgm.pause();
    		setTimeout(function(){
    			localStorage.removeItem('bgm_gds');
    			localStorage.removeItem('bgm_time');
    			bgm.setAttribute('value',1);
    			bgm.innerHTML='<source src="bgm/1.mp3" type="audio/mpeg">';
    			bgm_text.innerHTML='当前播放第1首歌曲';
    			bgm.load();
    			bgm.play();
    		},200);
    	}
    	//切换或刷新页面音轨补偿,1s后开始补偿
    	setTimeout(function(){
    		//如果发现本地有存储,则进行音轨补偿
    		if(localStorage.getItem('bgm_time')!=null){
    			bgm.currentTime=localStorage.getItem('bgm_time');
    			bgm.play();
    			/*音量逐渐增大*/
    		    bgm.volume = 0;
      			v = 0;
                var t = setInterval(function(){
                    v+= 0.005;
                    if(v<=1){
                		bgm.volume = v;
                    }else{
                        clearInterval(t);
                    }
                },25);
    		}
    		//每100ms周期执行播放进度记录
    		window.setInterval(function(){
    			//检查浏览器是否支持本地存储
    			if(typeof(Storage)!=='undefined'){
    				localStorage.setItem('bgm_time',bgm.currentTime);
    			}else{
    				var doc_body=document.querySelector('body');
    				doc_body.innerHTML="<h1>抱歉,您的浏览器过久,不支持localStorage本地存储。请更换新的浏览器再试</h1>";
    			}
    		},100);
    		//初始化就启动bgm
    		bgm.play();
    	    bgm.volume = 0;
       		v = 0;
            var t = setInterval(function(){
                v+= 0.005;
                if(v<=1){
                    bgm.volume = v;
                }else{
                    clearInterval(t);
                }
            },25);
    	},1000);
    }
    
    展开全文
  • 原生js跳转页面怎么实现
  • js 原生代码跳转页面

    2020-10-22 14:13:21
    window.location = './index.html';
     window.location = './index.html';
    
    展开全文
  • 使用原生js完成页面跳转

    千次阅读 2020-04-22 14:12:01
    // 将js直接写在html中 <button onclick="window.location.href='https://www.baidu.com'">点击跳转</button> //将js和html分开 <button class="click_btn">点击跳转</button> <scr...

    1.window.location.href

    // 将js直接写在html中
    <button onclick="window.location.href='https://www.baidu.com'">点击跳转</button>
    //将js和html分开
    <button class="click_btn">点击跳转</button>
    <script>
        var myBtn=document.getElementsByClassName('click_btn')[0];
        myBtn.onclick=function(){
            window.location.href="https://www.baidu.com";
        }
    </script>
    //需要注意的是,这里的window可以省略,即直接使用location.href
    <button onclick="location.href='https://www.baidu.com'">点击跳转</button>
    

    2.location.replace

    // 将js直接写在html中
    <button onclick="location.replace('https://www.baidu.com')">点击跳转</button>
    //将js和html分开
    <button class="click_btn">点击跳转</button>
    <script>
        var myBtn=document.getElementsByClassName('click_btn')[0];
        myBtn.onclick=function(){
            window.location.replace("https://www.baidu.com")
        }
    </script>
    
    window.location.href 和 location.replace的区别:
    1.有3个页面 a,b,c。 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c
    2.b->c 是通过 window.location.replace("..xx/c") 此时b页面的url会被c页面代替,并且点击后退按
    	钮时会回退到a页面(最开始的页面)
    3.b->c是通过 window.location.href("..xx/c") 此时b页面的路径会被c页面代替,但是点击回按钮后页
    	面回退的是b页面
    

    3.window.navigate(“https://www.baidu”)

    // 将js直接写在html中
    <button onclick="window.navigate('https://www.baidu.com')">点击跳转</button>
    //将js和html分开
    <button class="click_btn">点击跳转</button>
    <script>
        var myBtn=document.getElementsByClassName('click_btn')[0];
            myBtn.onclick=function(){
            window.navigate("https://www.baidu.com")
        }
    </script>
    
    window.location.href 和 window.navigate的区别:
    1.首先说明的是 window.navigate 与 window.location.href 都是实现页面链接跳转的。
    2.window.navigate 这个方法是只针对IE的,不适用于火狐等其他浏览器,在HTML DOM Window Object中
    	根本没有列出window.navigate这个方法,所以这个方法尽量少用,遗忘最好。
    3.window.location.href 兼容所有浏览器的。因此在实现页面跳转的时候还是使用这个比较靠谱。
    

    4.window.open(“https://www.baidu.com”)

    // 将js直接写在html中
    <button onclick="window.open('https://www.baidu.com')">点击跳转</button>
    //将js和html分开
    <button class="click_btn">点击跳转</button>
    <script>
        var myBtn=document.getElementsByClassName('click_btn')[0];
            myBtn.onclick=function(){
            window.open("https://www.baidu.com")
        }
    </script>
    

    5.self.location 和 top.location(两者的写法实相同的)

    // 将js直接写在html中
    <button onclick="top.location.href='https://www.baidu.com'">点击跳转</button>
    //将js和html分开
    <button class="click_btn">点击跳转</button>
    <script>
        var myBtn=document.getElementsByClassName('click_btn')[0];
            myBtn.onclick=function(){
                self.location="https://www.baidu.com";
        }
    </script>
    
    self.location 和 top.location 的区别和作用:
    1.两者可以结合起来,防止非法引用我们的网页
    2.假如你的网页地址是:http://www.a.com,别人的网址是http://www.b.com。他在他的页面用iframe等
    	框架引用你的http://www.a.com
    3.那么你可以用一下代码,来转向你的页面
    
    if(top.location.href!=self.location.href){
    	location.href="http://www.a.com";
    }
    
    展开全文
  • location.hash 原生js页面跳转/路由

    千次阅读 2019-09-02 13:14:02
    使用vue开发项目非常方便,vue全家桶让你想实现什么功能都更加便捷,但是使用原生js,jquery开发,页面之间跳转怎么实现呢, 下面说一下window.location.hash,概念性的东西大家看这篇文章,也比较全面,这里主要说...
  • 从A页面跳转到B页面在B页面获取?后面拼接的参数 页面B js代码 var obj=location.search; //先获取传过来的所有参数 console.log(“obj”,obj) //?a=1&b=2&c=3&d=4 var str = obj.slice(1) console.log...
  • 原生JS实现单页面路由跳转

    千次阅读 2018-09-27 17:32:16
    最近公司的一个小项目,需求只有几个页面;...原生JS实现路由跳转 function getEle(){ let S = document.getElementById("app").querySelectorAll("*"), res = []; S.forEach(e =&gt;{ ...
  • 跳转按钮 <div @click="linkHref('ID1')"></div> <div @click="linkHref('ID2')"></div> <div @click="linkHref('ID3')"></div> 跳转锚点 <div id="ID1"></div> ...
  • 数据大屏使用权限三种场景模式学校登录,...跳转到账号所属级别数据大屏具体权限及页面跳转,有react-router实现1.app.jsx入口处页面,设置页面传参变量名,并设置 关键字exact,表示不包含性匹配,2.入口处,第一...
  • 一个小的示例工程,封装android原生与react之间他跳转和数据传递 解压后,在cmd界面 进入解压的根目录 react-native start 启动服务 react-native run-android 安装apk 或者导入AS中编译安装APK
  • 一、html方式跳转 1.页面自动刷新:把如下代码加入区域中 其中20指每隔20秒刷新一次页面 2.页面自动跳转:把如下代码加入...二、原生js window.location.href="http://www.test.com/1.php";  window.navigate("ht
  • 原生js和jQuery实现页面跳转的学习

    万次阅读 2015-11-10 09:18:37
    参考了一位大神的博客:js页面跳转整理 1.window.location.href方式   window.location.href="target.aspx"; 2.window.navigate方式跳转 window.navigate("target.aspx"); 3.window.loction....
  • 需求:点击跳转页面指定位置 <div id="test">点击跳转到此处</div> 【法一】: 利用a标签的锚点跳转 <a href="#test">点击跳转</a> 由于锚点跳的原理是改变哈希值,...
  • 原生node.js路由页面跳转

    千次阅读 2018-09-14 19:02:42
    //node 原生html加载css //主要思想就是任何一个静态文件也应该做向应 // &lt;link src= href=''&gt; var http=require('http'); var fs=require('fs'); var server=http.createServer(); server.on('...
  • 相信大家是不是遇到过推送跳转到相关页面进行操作,JS交互时也需要跳转相关的页面,然后这个的页面都是不确定,每次跳转页面也不固定这时我们该怎么做呢?原文简单思路: 1、后台提供json,信息包括:要生成的控制...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 309
精华内容 123
关键字:

原生js跳转页面