页面刷新时，随机显示其中一个人的联系方式

 一、html代码

这里只贴了相应部分的代码

// 导航栏头部的电话
<div class="top_right">
      <img src="/styles2021/images2021/phone2_black.png">
      <p id="phone3"></p>
</div>

// 页脚的电话
<div class="footer_center">
     <span>全国服务热线：</span>
     <span class="index_span5" id="phone4"></span>
</div>


// 悬浮框
<div class="kf_container">
  <ul class="kf_ul">
    <li class="kf_li">
      <div class="kf_item">
        <a id="qq" href="" class="kf_a"> -----QQ的跳转链接
          <img class="img2" src="/styles2021/images2021/qq.png">
          <img class="img3" src="/styles2021/images2021/qq_white.png">
        </a>
        <span>QQ咨询</span>
      </div>
    </li>

    <li class="kf_li">
      <div class="kf_item">
        <img class="img2" src="/styles2021/images2021/phone.png">
        <img class="img3" src="/styles2021/images2021/phone_white.png">
        <span>座机咨询</span>
      </div>
      <div class="kf_hidden">
        <span id="name"></span>  -----姓名
        <span id="phone2"></span>-----座机电话
      </div>
    </li>

    <li class="kf_li">
      <div class="kf_item">
        <img class="img2" src="/styles2021/images2021/phone1.png">
        <img class="img3" src="/styles2021/images2021/phone1_white.png">
        <span>电话咨询</span>
      </div>
      <div class="kf_hidden">
        <span id="name2"></span>-----姓名
        <span id="phone1"></span>---手机电话
      </div>
    </li>

    <li class="kf_li">
      <div class="kf_item">
        <img class="img2" src="/styles2021/images2021/weixin.png">
        <img class="img3" src="/styles2021/images2021/weixin_white.png">
        <span>微信咨询</span>
      </div>
      <div class="kf_hidden kf_hidden2">
        <span><img id="weixin" src='' class="img1"></span> -----微信二维码图片
      </div>
    </li>
  </ul>
</div>

二、引用css、js

<link rel="stylesheet" href="/styles2021/css2021/kf2021.css">
<script type="text/javascript" charset="GB2312" src="/styles2021/js2021/kf2021.js"></script>

// 这里值得注意的是：引用外部的js 文件的编码格式，一定要与页面代码的编码格式一样，否则容易出现乱码的情况

 kf2021.js文件的具体内容

//页面加载时，就执行以下代码
window.onload = function () {
  // 1、先创建一个数组，数组的元素是一个对象
  document.charset = 'gb2312'
  var phonelist = [
    {
      name:"李工",
      phone1:'1111113000',
      phone2:'0755-834440639',
      qq:'tencent://message/?uin=81266009&Site=龙人&Menu=yes',
      weixin:'/styles2021/images2021/weixin_li.jpg'

    },
    {
      name:"黄工",
      phone1:'1855553933',
      phone2:'0755-8352500',
      qq:'tencent://message/?uin=2275559774&Site=龙人&Menu=yes',
      weixin:'/styles2021/images2021/weixin_huang.jpg'

    },
    {
      name:"韩工",
      phone1:'189666691',
      phone2:'0755-83766070',
      qq:'tencent://message/?uin=78666690736&Site=龙人&Menu=yes',
      weixin:'/styles2021/images2021/weixin_han.jpg'

    }
  ]
  // 2、通过ID 获取将要赋值的元素
  var name = document.getElementById('name')
  var name2 = document.getElementById('name2')
  var phone1 = document.getElementById('phone1')
  var phone2 = document.getElementById('phone2')
  var phone3 = document.getElementById('phone3')
  var phone4 = document.getElementById('phone4')
  var phone5 = document.getElementById('phone5')
  var qq = document.getElementById('qq')
  var weixin = document.getElementById('weixin')

  // 随机生成数组的下标   
  // random（）：随机生成 0（包含0） -1 （不包含1）的数 。  floor(): 向下取整数
  // 原理是:  随机数 * (最大值 - 最小值) + 最小值。
  var i = Math.floor(Math.random() * (3 - 0) + 0)

  // 3、把 phonelist[i] 的值插入到对应的元素的位置上
  name.innerHTML = phonelist[i].name
  name2.innerHTML = phonelist[i].name
  phone1.innerHTML = phonelist[i].phone1
  phone2.innerHTML = phonelist[i].phone2
  phone3.innerHTML = phonelist[i].phone2
  phone4.innerHTML = phonelist[i].phone2
  phone5.innerHTML = phonelist[i].phone2
  qq.href = phonelist[i].qq   --- 这里是给<a> 标签的 href 属性赋值
  weixin.src = phonelist[i].weixin --- 给<img>标签的scr属性赋值

}

以上这样调用即可随机显示联系方式。样式就可以自己随机调整了。