日度归档:2020年2月7日

css 如何设置表格内部边框(无外边框)呢?


摘要:
下文讲述使用css设置表格内单元格的边框,如下所示:

在web页面开发中,我们有时需要设计一个无外边框,只有内边框的表格,那么下文将通过举例的方式讲述其实现方式,

实现思路:
1.设置所有td –右下边框样式
2.剔除最后一列的 右边框样式
3.剔除最后一行的 下边框样式

例:
设置一个table,只设置其内边框

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)-设置表格内边框样式</title>
<style type="text/css">
table{ 
  border-collapse:collapse; 
  border:0px; 
} 
table td{ 
  border-top:0; 
  border-right:1px solid red; 
  border-bottom:1px solid red; 
  border-left:0; 
} 
table tr.bottomRow td { 
  border-bottom:0; 
} 
table tr td.rightColumn{ 
  border-right: 0; 
} 
</style>
</head>
<body>
<table>
  <tr>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td class="rightColumn">猫猫教程</td>
  </tr>
  <tr>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td class="rightColumn">猫猫教程</td>
  </tr>
  <tr class="bottomRow">
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td>猫猫教程</td>
    <td class="rightColumn">猫猫教程</td>
  </tr>
</table>
</body>
</html>
 
css 表格内边框实现方法分享

css 表格内边框实现方法分享

javascript 如何使”event事件对象“兼容性所有浏览器呢?


摘要:
下文讲述JavaScript中event实现兼容多浏览器的方法分享,如下所示:

event 在javascript的函数中必不可少,常用于传送事件对象,但是在火狐浏览器和IE浏览器中获取对象还是有一些区别,下文将举例讲述兼容所有浏览器的写法,如下:

    ***.onclick=function(ev){
        ev=ev||window.event;
        var x=ev.offsetWidth;
     }

javascript 如何在网页上显示系统时间呢?


摘要:
下文讲述html页面上显示系统时间的方法分享,如下所示:


实现思路:
1.通过getDate及一些时间日期相关函数生成时间
2.通过setinterval定时器函数为系统添加重复执行函数的方法

例:
在html页面上生成一个电子钟

  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)---页面上加入电子钟</title>
 
<script type="text/javascript"> 

 
function init() { 
	//获取时钟显示控件
  var txt = document.getElementById("txtTime"); 

  //获取时钟"开始按钮"
  var btnS = document.getElementById("btnStart"); 
  //获取时钟"关闭按钮"
  var btnE = document.getElementById("btnEnd"); 
  

   //定义时钟控制器
   var timer;


   //绑定按钮事件
  btnS.onclick = function() {
     timer = setInterval(setDateTimeToTime, 1000);
 
    function setDateTimeToTime() {
      txt.innerHTML =  currentDateTime();
    }

	btnS.Enabled = true;
	btnE.Enabled = false;

  }


  btnE.onclick =function()
  {
	  clearInterval(timer);
	  btnS.Enabled = false;
	  btnE.Enabled =true;
	  txt.innerHTML ="时钟已关闭!";
  }




  
  function currentDateTime(){ 
  var d=new Date(),str=''; 
  str +=d.getFullYear()+'年'; //获取当前年份 
  str +=d.getMonth()+1+'月'; //获取当前月份(0——11) 
  str +=d.getDate()+'日'; 
  str +=d.getHours()+'时'; 
  str +=d.getMinutes()+'分'; 
  str +=d.getSeconds()+'秒'; 
  return str; 
} 
 
 
}



</script>
</head>
<body>


 <input type="button" value="开启时钟" id="btnStart"  />
 <input type="button" value="关闭时钟" id="btnEnd"     />
  <br />
  <span id="txtTime" style="font-size:16px;font-weight:bold;color:red;">
  </span>
  
 <script>
 init();
 </script>

</body>
</html>
javascript html页面上生成电子时钟的方法分享

javascript html页面上生成电子时钟的方法分享