强仔
@qiangzai

博客友链是一个网站必不可少的一部分,简单的 a 标签跳转外链早已不够新颖,很多网站也引入了独立的跳转页,这样能更好的给访客留下深刻印象,其中引用的技术只是一段简单的js代码

图文教程

1.首页我们创建一个独立页面
Typecho博客创建新页面时间要想访问到我们自己创建的指定目录文件,必须后台开启 伪静态 ,这样我们访问到我们创建的目录文件就可以直接 域名/xx.html

2.引入JS和HTML代码
这里如果你的博客用了什么编辑器,就需要用到他们编辑器指定的页面规则,这里我用的md编辑器,当前如果要在文章页面里引入网页元素,就需要用 一对 !!! 把代码包起来

  • JS跳转代码

<script>
// 获取当前url地址
var url = window.location.href;
// 截取传递的url参数
url = url.match(/url=(S*)/)[1];
document.getElementById("UrlId").href = url;
// 获取秒数显示id
var seconds = document.getElementById("seconds");
// 设置秒数
var num = 3;
var timer = setInterval(function () {
num--;
seconds.innerText = num;
if(num == 0){
window.location.href = url;
}
},1000)
</script>

  • 显示秒数代码
    我们可以定义一个秒数,秒数颜色可以自定义样式,显示不同文本颜色, 更显眼
<h1>您将在<span id="seconds">3</span>秒后进入强仔博客友链</h1>
<p>亲亲欢迎联系强仔互换友链哦</p>
<p>当前正在努力跳转中……</p>
<a id="UrlId" href="">点我马上进入</a>

最后看一下简单效果
我创建的是https://www.qz.al/haha.html



所以后面加上参数url=即可,即直接https://www.qz.al/haha.html?url=http://www.baidu.com

结语

感谢访问强仔博客,希望本文你对有所帮助

本文文章字数为:380个

您阅读这篇文章共花了:

文章最后更新于:2021 年 01 月 02 日 14:37:48

当前IP为:3.236.156.34,请自觉遵守网络安全

END
上午9:40 · 2021年01月02日
100
3
2
宝贝留个言吧

    爱强仔     
    12天前

    憨憨烧鱼     
    4天前

    文章好!

    尤子     
    2天前

    妙啊。

教程
Typecho实现简单独立页面跳转
博客友链是一个网站必不可少的一部分,简单的 a 标签跳转外链早已不够新颖,很多网站也引入了独立的跳转页,这样能更好的给访客留下深刻印象,其中...
欢迎扫描二维码继续阅读
January 2, 2021
强仔博客
blogger
强仔
统计
文章:106 篇
分类:4 个
评论:313 条
加载耗时:20 ms
运行时长:1年141天
by yoniu.
强仔博客