日度归档:2020年3月12日

javascript 有哪几种刷新页面的方法呢?


摘要:
下文讲述javascript刷新页面的方法分享,如下所示:

在web开发,刷新页面是我们常用的操作,下文将讲述js刷新页面的八种方法,如下所示:

例:
刷新页面的8种方法分享

 
  <script>
  //www.maomao365.com
  //刷新网页的方法分享

  history.go(0)
  
  location.reload()

  location=location

  location.assign(location)

  document.execCommand('Refresh')

  window.navigate(location)

  location.replace(location)

  document.URL=location.href
  
    </script>

javascript 如何实现随机出现姓名呢?


摘要:
下文讲述javascript中随机出现数组中名字的方法分享,如下所示:

下文讲述一个上课随机点名的js小程序,

实现思路:
1.将姓名放入一个数组中
2.当开始点名时,生成一个随机数作为索引,然后根据索引获取数组中的数据

例:
使用javascript生成一个上课随机点名器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>猫猫教程(www.maomao365.com)
	---js随机点名器的示例分享
	</title>
    <style type="text/css">    
      #container {
        margin: auto;
        width: 260px;
        font-size: 26px;
        height: 26px;
        color: white;
        text-align: center;
        margin-top: 200px;
      }      
      #btn {
        margin: auto;
        width: 200px;
        text-align: center;
        margin-top: 75px;
        color: #fff;
        font-size: 25px;
        cursor: pointer;
      }
    </style>
     <script type="text/javascript">
     var namelist=["毛狗","李秋水","张三丰","虚竹","乔峰"];
    var timer=null;
   
  function dianMing(){
  var b=window.document.getElementById("btn");
  if(timer==null){
   b.innerHTML="停止";
   showInfo();
  }
  else{
   b.innerHTML="开始点名";
   clearTimeout(timer);
   timer=null;
  }
  }
   
  function showInfo(){
  var d=window.document.getElementById("container");
  var n=Math.floor((Math.random()*100000))%namelist.length;
  d.innerHTML=namelist[n];
  timer=setTimeout("showInfo()",1);
  }
     </script>
  </head>
  <body id="bodybj" style="background-color:blue;">
    <div id="container">开始随机点名</div>
    <div id="btn" onclick="dianMing()">点名</div>
  </body>
</html>
javascript 随机点名的方法分享

javascript 随机点名的方法分享

CSS 如何从从第n个子元素开始设置样式呢?


摘要:
下文讲述为一个div下的列表元素的第N个元素开始设置样式,如下所示:


实现思路:
使用伪类:nth-child对元素进行样式设置

例:
从第三个span开始设置其颜色为蓝色和粗体


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content="http://www.maomao365.com"> 
  <title>猫猫教程(www.maomao365.com)
  --从第N个元素开始设置其样式
  </title>
  <style>
   span{
      display:block;
      
      height:30px;
	  width:160px;
	  line-height:30px; 
	  border-bottom:1px solid blue;

   }

   /*
   从第三个span开始设置其字体颜色为蓝色
   字体为粗体
   */
   span:nth-child(n+3){
      font-weight:bold;
	  color:blue;
   }
  </style>
 </head>
 <body>
  
   <div>
      <span>猫猫教程-------1</span>
	  <span>猫猫教程-------2</span>
	  <span>猫猫教程-------3</span>
	  <span>猫猫教程-------4</span>
	  <span>猫猫教程-------5</span>
   </div>
    
 </body>
</html>
css 从第N个元素开始设置元素样式

css 从第N个元素开始设置元素样式