链接地址跳转 原创

深处莫神
发布于 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2022-8-11 15:01:07修改
收藏
回复
举报
回复
    相关推荐