日度归档:2020年2月19日

javascript中如何使用js脚本检测浏览器是否支持HTML5呢?


摘要:
下文讲述js脚本检测浏览器是否支持Html5功能,如下所示:

使用Js脚本检测浏览器是否支持html5的四种方法 :

1.使用全局对象检测

<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>猫猫教程--html5是否支持检测</title>
    <script>
        window.onload = function() {
            if (window.applicationCache) {
                document.write("支持html5");
            } else {
                document.write("不支持html5");
            }
        }
    </script>
</head>
<body>
 
</body>
</html>


2.检测canvas标签是否可用

通过在网页上创建canvas标签,看看是否可用使用其属性,能正常使用则为支持html5

<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Simple Square</title>
    <script type="text/javascript">
        window.onload = test;
 
        function test () {
            var canvas = document.getElementById('h5Test');
            if (canvas.getContext) {
                var context = canvas.getContext('2d');
 
                context.fillStyle = "rgb(13, 118, 208)";
                context.fillRect(2, 2, 98, 98);
            } else {
                alert("浏览器不支持 HTML5 无法使用canvas");
            }
        }
    </script>
</head>
<body>
    <canvas id="h5Test" width="90" height="90"></canvas>
</body>
</html>


3.检测一个方法是否存在返回值

通过检测浏览器是否支持MP4解码,测试其是否支持html5


<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>猫猫教程-html5测试</title>
    <script>
        function h5Check() {
            return !!document.createElement("video").canPlayType;
        }
 
        function h264Check() {
            if (!videoCheck) {
            document.write("不支持html5");
            return;
            }
 
            var video = document.createElement("video");
            if (!video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
                document.write("不支持html5");
            }
            return;
        }
  
        h5Check(); 
    </script>
</head>
<body>
 
</body>
</html>



4.检测表单元素是否支持特殊属性

例:检测input是否支持range类型,不支持则为非html5

 
 <!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>猫猫教程--html5支持</title>
    <script>
        function h5Check() {
            var i = document.createElement("input");
            i.setAttribute("type", "range");
            if (i.type == "text") {
                document.write("浏览器不支持html5");
            }
            return;
        }
  
        h5Check(); 
    </script>
</head>
<body>
 
</body>
</html>

CSS3 如何实现一个文字的倒影效果呢?


摘要:
下文讲述使用css脚本实现一个倒影效果的方法分享,如下所示:


实现思路:
1.使用:before 中attr复制文本
2.使用背景渐变模拟倒影效果

例:
实现一个倒影的文字效果


<!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">
.container h3{ 
  position:relative; 
  float:left; 
  opacity:0.8; 
  font:40px; 
} 
.container h3:before{ 
  content:attr(title); 
  position:absolute; 
  z-index:1; 
  top:100%; 
  left:0; 
  height:100%; 
  width:100%; 
  -webkit-transform:scaleY(-1); 
} 
.container h3:after{ 
  content:''; 
  position:absolute; 
  z-index:2; 
  top:100%; 
  left:0; 
  height:100%; 
  width:100%; 
  background:-webkit-gradient(linear, center top, center bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
}  
</style>
</head>
<body>
<div class="container"> 
  <h3 title="猫猫教程">猫猫教程</h3>  
</div> 
</body>
</html>
  

javascript中js脚本前面加分号的有什么作用呢?


摘要:
下文讲述Javascript中脚本,一些库的开头都会加上一个分号,那为什么要这么写呢?


js分号作用

1.防止代码压缩后,如果其它js文件结尾处没有加入分号,浏览器作为一条语句解析,然后产生错误
2.也可以使用 void ! + ~ 代替

例:
如果不加入分号,下面的脚本将会产生相应的错误信息

  if (!args) return var test
     var t = 788 t += 90