链接地址跳转原创

深处莫神

发布于 2022-8-11 14:58

浏览

0收藏

地址链接跳转

1.按钮触发事件后，正则解析链接地址，地址解析要去除空白格，取的字符串才可进行replace操作
2.输入字符格式正确则display=block，显示出提示信息
3.设置用户最大只能输入三次地址信息，利用浏览器缓存sessionStorage进行设置，浏览器 sessionStorage.getItem（）为获取， sessionStorage.setItem（）为设置，设置提交变量，变量超过三次，则用setAttribute将input框设置为禁用状态，并弹出提示输入到上限input.setAttribute(‘disabled’, true)
4.设置自动运行函数，倒计时（10s）开始计数，获取文本数据后，如果倒计时数据小于0，设置缓存为0，利用location.href = url跳转到输入地址界面，同时清除定时器
5.设置定时器，按下开始按钮时自动运行，暂停按钮时暂停运行

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>重复跳转的地址 不能够算次数进来</h1>
  <input type="url" id="url" placeholder="请输入跳转地址" required value="http://www.baidu.com" />
  <span id="notice" style="display:none;color:red;"></span>


  <br />
  <br />

  <button id="start">开始</button>
  <button id="stop">暂停</button>
  
  <br />
  <br />

  <div id="result">
    倒计时：<b id="num" style="color:red;">10</b>秒，跳转界面
  </div>
</body>
</html>
<script>
  var input = document.getElementById('url')
  var start = document.getElementById('start')
  var stop = document.getElementById('stop')
  var num = document.getElementById('num')
  var notice = document.getElementById('notice')
  var T, url = 'http://www.baidu.com';

  //先设置一下次数
  sessionStorage.setItem('nums', 0)

  //输入框改变事件
  input.onchange = function()
  {
    //对url地址进行判断
    var content = input.value.trim()
    //内容替换 替换空白
    content = content.replace(/\s/g, "")

    //用正则验证输入的是否为url结构
    // http://www.baidu.com
    var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;

    //返回true 说明通过验证
    if(reg.test(content))
    {
      notice.style.display = 'inline-block'
      notice.style.color = 'green'
      notice.innerText = '格式正确'

      //获取一下设置的次数
      var nums = sessionStorage.getItem('nums')
          nums = parseInt(nums) ? parseInt(nums) : 0;

      if(nums < 3)
      {
        //覆盖全局
        url = content

        //次数要增加
        sessionStorage.setItem('nums', ++nums)
      }else
      {
        notice.style.display = 'inline-block'
        notice.style.color = 'red'
        notice.innerText = '修改次数已经超过最大极限'

        //将输入框禁用掉
        input.setAttribute('disabled', true)
      }

      
    }else
    {
      notice.style.display = 'inline-block'
      notice.style.color = 'red'
      notice.innerText = '格式不正确'
      url = ''
    }
  }


  function autoplay()
  {
    var sec = parseInt(num.innerText)

    if(sec <= 0)
    {
      if(url)
      {
        //跳转之前需要将次数归0
        sessionStorage.setItem('nums', 0)


        location.href = url
      }else
      {
        alert('跳转地址有误')
      }

      //清除定时器
      clearInterval(T)
    }else
    {
      //倒计时秒数---
      num.innerText = --sec
    }
  }

  //开始
  start.onclick = function()
  {
    T = setInterval(autoplay, 500)
  }

  //暂停
  stop.onclick = function()
  {
    //清除定时器
    clearInterval(T)
  }
</script>

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

其他

标签

已于2022-8-11 15:01:07修改