兼容IE8的canvas自制圆形比例图

兼容IE8的canvas自制圆形比例图，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
            <HTML>
            <HEAD>
                <TITLE> IE8支持HTML5+CSS3 </TITLE>
                <meta charset="UTF-8">
            <head>
            
            
            <!--IE8下显示状态-->
            <!--[if IE 8]>
                <style type="text/css">
                    #cv {
                        margin-top:100px;
                        margin-left:500px;
                        position: relative;
                        width: 300px;
                        height: 300px;
                        border:1px solid red;
                        border-radius: 20px;
                        background-color:#fff;
                    }
                    @media \0screen{
                        #cv{
                            behavior: url(ie-css3.htc);
                        }
                    }
                    .mySpan{
                        position:absolute;
                        font-size:50px;
                        z-index:99;
                        top: 208px;
                        left: 600px;
                    }
                </style>
            
                <script type="text/javascript" src="jquery-1.7.js"></script>
            
                <script type="text/javascript" src="html5.js"></script>
                <script type="text/javascript" src="excanvas.compiled.js"></script>
                <script type="text/javascript">
                    function test() {
                        //声明外圆的半径和内圆的半径
                        var myR = 80;
                        var myNeiR = 50;
                        //获取输入框里面的值
                        var myInput1_Value = parseInt($(".myInput1").val());
                        var myInput2_Value = parseInt($(".myInput2").val());
            
                        var canvas  = document.getElementById("cv");
                        var cxt = canvas.getContext("2d");
            
                        //声明第一个进度条所占的百分比并转换成角度值
                        var myfirst = Math.PI * 2 * myInput1_Value / 100;
            
                        //声明第二个进度条所占的百分比并转换成角度值
                        var mysecond = Math.PI * 2 * myInput2_Value / 100;
            
                        //声明x,y边的变量，并获取变量的长度
                        var myYBian = Math.sin(myfirst) * 65;
                        var myXBian = Math.cos(myfirst) * 65;
                        console.log(myYBian + "===================" + myXBian);
            
                        //声明并获取最前面圆的圆心坐标
                        var myYuanX1 = null;
                        var myYuanY1 = null;
                        if (myInput1_Value >= 25 && myInput1_Value <= 50) {
                            var myYuanX1 = myXBian + 126;
                            var myYuanY1 = myYBian + 125;
                        } else if (myInput1_Value > 50 && myInput1_Value <= 75) {
                            var myYuanX1 = myXBian + 125;
                            var myYuanY1 = myYBian + 126;
                        } else if (myInput1_Value > 75 && myInput1_Value <= 100) {
                            var myYuanX1 = myXBian + 124;
                            var myYuanY1 = myYBian + 125;
                        } else {
                            var myYuanX1 = myXBian + 125;
                            var myYuanY1 = myYBian + 124;
                        }
            
                        var myYBian2 = Math.sin(myfirst + mysecond) * 65;
                        var myXBian2 = Math.cos(myfirst + mysecond) * 65;
                        var myYuanX2 = null;
                        var myYuanY2 = null;
                        if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {
                            var myYuanX2 = myXBian2 + 126;
                            var myYuanY2 = myYBian2 + 125;
                        } else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {
                            var myYuanX2 = myXBian2 + 125;
                            var myYuanY2 = myYBian2 + 126;
                        } else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {
                            var myYuanX2 = myXBian2 + 124;
                            var myYuanY2 = myYBian2 + 125;
                        } else {
                            var myYuanX2 = myXBian2 + 125;
                            var myYuanY2 = myYBian2 + 124;
                        }
            
            
                            //画出最外面的一个圆形
                            cxt.fillStyle = "#ff3300";
                            cxt.beginPath();
                            cxt.arc(125, 125, myR, 0, Math.PI * 2, true);
                            cxt.closePath();
                            cxt.fill();
            
            
                        //再次重新声明变量颜色
                        cxt.fillStyle = "#0A72CB";
                        //画一个我角度为我所需要的扇形
                        DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);
                        //画一个添加在我所画扇形前面的半圆
                        DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);
            
            
                        //重新给画笔声明颜色
                        cxt.fillStyle = "#000";
                        //画一个我角度为我所需要的扇形
                        DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);
                        //画一个添加在我所画扇形前面的半圆
                        DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);
            
            
            
                        //画一个白色的实心圆形
                        cxt.fillStyle = "#fff";
                        cxt.beginPath();
                        cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);
                        cxt.closePath();
                        cxt.fill();
            
                        //画进度条所需要调用的函数
                        function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                            var centerPoint = {x: 125, y: 125};
                            start_angle = start_angle || 0;
                            if (canvas_tag.getContext) {
            //开始绘制路径
                                ctx = canvas_tag.getContext("2d");
                                ctx.beginPath();
            //画出弧线
                                ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //画出结束半径
                                ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                                if (fill) {
                                    ctx.fill();
                                } else {
                                    ctx.closePath();
                                    ctx.stroke();
                                }
                            } else {
                                alert(‘You need Safari or Firefox 1.5+ to see this demo.‘);
                            }
                        }
            
                        //画最前面半圆所需要调用的函数
                        function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                            var centerPoint = {x: myYuanX1, y: myYuanY1};
                            start_angle = start_angle || 0;
                            if (canvas_tag.getContext) {
            //开始绘制路径
                                ctx = canvas_tag.getContext("2d");
                                ctx.beginPath();
            //画出弧线
                                ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //画出结束半径
                                ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                                if (fill) {
                                    ctx.fill();
                                } else {
                                    ctx.closePath();
                                    ctx.stroke();
                                }
                            } else {
                                alert(‘You need Safari or Firefox 1.5+ to see this demo.‘);
                            }
                        }
            
                        //画最前面半圆所需要调用的函数
                        function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                            var centerPoint = {x: myYuanX2, y: myYuanY2};
                            start_angle = start_angle || 0;
                            if (canvas_tag.getContext) {
            //开始绘制路径
                                ctx = canvas_tag.getContext("2d");
                                ctx.beginPath();
            //画出弧线
                                ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //画出结束半径
                                ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                                if (fill) {
                                    ctx.fill();
                                } else {
                                    ctx.closePath();
                                    ctx.stroke();
                                }
                            } else {
                                alert(‘You need Safari or Firefox 1.5+ to see this demo.‘);
                            }
                        }
            
            
            
            
            
                    }
            
                    window.onload = test;
                </script>
            
            
            </head>
            
            <body>
            <span class="mySpan">20%</span>
            <canvas id="cv"></canvas>
            <input type="text" class="myInput1" value="10">
            <input type="text" class="myInput2" value="20">
            <![endif]-->
            
            
            <!--IE9下显示状态-->
            <!--[if gte IE 9]>
            <style>
                #first{
                    margin-top:100px;
                    margin-left:500px;
                    border:1px solid red;
                    position: relative;
                    behavior: url(ie-css3.htc);
                }
                .mySpan{
                    position:absolute;
                    font-size:50px;
                    z-index:99;
                    top: 208px;
                    left: 600px;
                }
            </style>
            </head>
            <body>
            <canvas id="first"width="300" height="300" >
            
            </canvas>
            <span class="mySpan">20%</span>
            <input type="text" class="myInput1" value="10">
            <input type="text" class="myInput2" value="20">
            <button type="button" class="myBtn">确定</button>
            
            <script type="text/javascript" src="jquery-1.7.js"></script>
            <script type="text/javascript">
            
            
                console.log(Math.sin(Math.PI/6))
            
                $(function() {
            
                    //声明外圆的半径和内圆的半径
                    var myR = 80;
                    var myNeiR = 50;
            
                    //获取输入框里面的值
                    var myInput1_Value = parseInt($(".myInput1").val());
                    var myInput2_Value = parseInt($(".myInput2").val());
            
                    //判断输入框里面的值相加是否超过100
                    if (myInput1_Value + myInput2_Value <= 100) {
                        $(".mySpan").html(myInput1_Value + "%")
            
                        //声明第一个进度条所占的百分比并转换成角度值
                        var myfirst = Math.PI * 2 * myInput1_Value / 100;
            
                        //声明第二个进度条所占的百分比并转换成角度值
                        var mysecond = Math.PI * 2 * myInput2_Value / 100;
            
                        //声明获取画笔
                        var canvas = document.getElementById(‘first‘);
            
                        //声明x,y边的变量，并获取变量的长度
                        var myYBian = Math.sin(myfirst) * 65;
                        var myXBian = Math.cos(myfirst) * 65;
                        console.log(myYBian + "===================" + myXBian);
            
                        //声明并获取最前面圆的圆心坐标
                        var myYuanX1 = null;
                        var myYuanY1 = null;
                        if (myInput1_Value >= 25 && myInput1_Value <= 50) {
                            var myYuanX1 = myXBian + 126;
                            var myYuanY1 = myYBian + 125;
                        } else if (myInput1_Value > 50 && myInput1_Value <= 75) {
                            var myYuanX1 = myXBian + 125;
                            var myYuanY1 = myYBian + 126;
                        } else if (myInput1_Value > 75 && myInput1_Value <= 100) {
                            var myYuanX1 = myXBian + 124;
                            var myYuanY1 = myYBian + 125;
                        } else {
                            var myYuanX1 = myXBian + 125;
                            var myYuanY1 = myYBian + 124;
                        }
            
                        var myYBian2 = Math.sin(myfirst + mysecond) * 65;
                        var myXBian2 = Math.cos(myfirst + mysecond) * 65;
                        var myYuanX2 = null;
                        var myYuanY2 = null;
                        if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {
                            var myYuanX2 = myXBian2 + 126;
                            var myYuanY2 = myYBian2 + 125;
                        } else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {
                            var myYuanX2 = myXBian2 + 125;
                            var myYuanY2 = myYBian2 + 126;
                        } else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {
                            var myYuanX2 = myXBian2 + 124;
                            var myYuanY2 = myYBian2 + 125;
                        } else {
                            var myYuanX2 = myXBian2 + 125;
                            var myYuanY2 = myYBian2 + 124;
                        }
            
            
                        //画出最外面的一个圆形
                        var cxt = canvas.getContext("2d")
                        cxt.fillStyle = "#ff3300";
                        cxt.beginPath();
                        cxt.arc(125, 125, myR, 0, Math.PI * 2, true);
                        cxt.closePath();
                        cxt.fill();
            
            
                        //再次重新声明变量颜色
                        cxt.fillStyle = "#0A72CB";
                        //画一个我角度为我所需要的扇形
                        DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);
                        //画一个添加在我所画扇形前面的半圆
                        DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);
            
            
                        //重新给画笔声明颜色
                        cxt.fillStyle = "#000";
                        //画一个我角度为我所需要的扇形
                        DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);
                        //画一个添加在我所画扇形前面的半圆
                        DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);
            
            
                        //画一个白色的实心圆形
                        cxt.fillStyle = "#fff";
                        cxt.beginPath();
                        cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);
                        cxt.closePath();
                        cxt.fill();
                    }
            
            
                    //画进度条所需要调用的函数
                    function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                        var centerPoint = {x: 125, y: 125};
                        start_angle = start_angle || 0;
                        if (canvas_tag.getContext) {
            //开始绘制路径
                            ctx = canvas_tag.getContext("2d");
                            ctx.beginPath();
            //画出弧线
                            ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //画出结束半径
                            ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                            if (fill) {
                                ctx.fill();
                            } else {
                                ctx.closePath();
                                ctx.stroke();
                            }
                        } else {
                            alert(‘You need Safari or Firefox 1.5+ to see this demo.‘);
                        }
                    }
            
            
                    //画最前面半圆所需要调用的函数
                    function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                        var centerPoint = {x: myYuanX1, y: myYuanY1};
                        start_angle = start_angle || 0;
                        if (canvas_tag.getContext) {
            //开始绘制路径
                            ctx = canvas_tag.getContext("2d");
                            ctx.beginPath();
            //画出弧线
                            ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //画出结束半径
                            ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                            if (fill) {
                                ctx.fill();
                            } else {
                                ctx.closePath();
                                ctx.stroke();
                            }
                        } else {
                            alert(‘You need Safari or Firefox 1.5+ to see this demo.‘);
                        }
                    }
            
                    //画最前面半圆所需要调用的函数
                    function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                        var centerPoint = {x: myYuanX2, y: myYuanY2};
                        start_angle = start_angle || 0;
                        if (canvas_tag.getContext) {
            //开始绘制路径
                            ctx = canvas_tag.getContext("2d");
                            ctx.beginPath();
            //画出弧线
                            ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //画出结束半径
                            ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                            if (fill) {
                                ctx.fill();
                            } else {
                                ctx.closePath();
                                ctx.stroke();
                            }
                        } else {
                            alert(‘You need Safari or Firefox 1.5+ to see this demo.‘);
                        }
                    }
            
                })
            </script>
            <![endif]-->
            
            
            <!--非IE下的显示状态-->
            <![if !IE]>
            <style>
                #first{
                    margin-top:100px;
                    margin-left:500px;
                    border:1px solid red;
                    position: relative;
                    behavior: url(ie-css3.htc);
                }
                .mySpan{
                    position:absolute;
                    font-size:50px;
                    z-index:99;
                    top: 208px;
                    left: 600px;
                }
            </style>
            </head>
            <body>
            <canvas id="first"width="300" height="300" ></canvas>
            <span class="mySpan">20%</span>
            <input type="text" class="myInput1" value="10">
            <input type="text" class="myInput2" value="20">
            <button type="button" class="myBtn">确定</button>
            
            <script type="text/javascript" src="jquery-1.7.js"></script>
            <script type="text/javascript">
            
            
                console.log(Math.sin(Math.PI/6))
            
                $(function() {
            
                    //声明外圆的半径和内圆的半径
                    var myR = 80;
                    var myNeiR = 50;
            
                    //获取输入框里面的值
                    var myInput1_Value = parseInt($(".myInput1").val());
                    var myInput2_Value = parseInt($(".myInput2").val());
            
                    //判断输入框里面的值相加是否超过100
                    if (myInput1_Value + myInput2_Value <= 100) {
                        $(".mySpan").html(myInput1_Value + "%")
            
                        //声明第一个进度条所占的百分比并转换成角度值
                        var myfirst = Math.PI * 2 * myInput1_Value / 100;
            
                        //声明第二个进度条所占的百分比并转换成角度值
                        var mysecond = Math.PI * 2 * myInput2_Value / 100;
            
                        //声明获取画笔
                        var canvas = document.getElementById(‘first‘);
            
                        //声明x,y边的变量，并获取变量的长度
                        var myYBian = Math.sin(myfirst) * 65;
                        var myXBian = Math.cos(myfirst) * 65;
                        console.log(myYBian + "===================" + myXBian);
            
                        //声明并获取最前面圆的圆心坐标
                        var myYuanX1 = null;
                        var myYuanY1 = null;
                        if (myInput1_Value >= 25 && myInput1_Value <= 50) {
                            var myYuanX1 = myXBian + 126;
                            var myYuanY1 = myYBian + 125;
                        } else if (myInput1_Value > 50 && myInput1_Value <= 75) {
                            var myYuanX1 = myXBian + 125;
                            var myYuanY1 = myYBian + 126;
                        } else if (myInput1_Value > 75 && myInput1_Value <= 100) {
                            var myYuanX1 = myXBian + 124;
                            var myYuanY1 = myYBian + 125;
                        } else {
                            var myYuanX1 = myXBian + 125;
                            var myYuanY1 = myYBian + 124;
                        }
            
                        var myYBian2 = Math.sin(myfirst + mysecond) * 65;
                        var myXBian2 = Math.cos(myfirst + mysecond) * 65;
                        var myYuanX2 = null;
                        var myYuanY2 = null;
                        if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {
                            var myYuanX2 = myXBian2 + 126;
                            var myYuanY2 = myYBian2 + 125;
                        } else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {
                            var myYuanX2 = myXBian2 + 125;
                            var myYuanY2 = myYBian2 + 126;
                        } else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {
                            var myYuanX2 = myXBian2 + 124;
                            var myYuanY2 = myYBian2 + 125;
                        } else {
                            var myYuanX2 = myXBian2 + 125;
                            var myYuanY2 = myYBian2 + 124;
                        }
            
            
                        //画出最外面的一个圆形
                        var cxt = canvas.getContext("2d")
                        cxt.fillStyle = "#ff3300";
                        cxt.beginPath();
                        cxt.arc(125, 125, myR, 0, Math.PI * 2, true);
                        cxt.closePath();
                        cxt.fill();
            
            
                        //再次重新声明变量颜色
                        cxt.fillStyle = "#0A72CB";
                        //画一个我角度为我所需要的扇形
                        DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);
                        //画一个添加在我所画扇形前面的半圆
                        DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);
            
            
                        //重新给画笔声明颜色
                        cxt.fillStyle = "#000";
                        //画一个我角度为我所需要的扇形
                        DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);
                        //画一个添加在我所画扇形前面的半圆
                        DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);
            
            
                        //画一个白色的实心圆形
                        cxt.fillStyle = "#fff";
                        cxt.beginPath();
                        cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);
                        cxt.closePath();
                        cxt.fill();
                    }
            
            
                    //画进度条所需要调用的函数
                    function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                        var centerPoint = {x: 125, y: 125};
                        start_angle = start_angle || 0;
                        if (canvas_tag.getContext) {
            //开始绘制路径
                            ctx = canvas_tag.getContext("2d");
                            ctx.beginPath();
            //画出弧线
                            ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //画出结束半径
                            ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                            if (fill) {
                                ctx.fill();
                            } else {
                                ctx.closePath();
                                ctx.stroke();
                            }
                        } else {
                            alert(‘You need Safari or Firefox 1.5+ to see this demo.‘);
                        }
                    }
            
            
                    //画最前面半圆所需要调用的函数
                    function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                        var centerPoint = {x: myYuanX1, y: myYuanY1};
                        start_angle = start_angle || 0;
                        if (canvas_tag.getContext) {
            //开始绘制路径
                            ctx = canvas_tag.getContext("2d");
                            ctx.beginPath();
            //画出弧线
                            ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //画出结束半径
                            ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                            if (fill) {
                                ctx.fill();
                            } else {
                                ctx.closePath();
                                ctx.stroke();
                            }
                        } else {
                            alert(‘You need Safari or Firefox 1.5+ to see this demo.‘);
                        }
                    }
            
                    //画最前面半圆所需要调用的函数
                    function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                        var centerPoint = {x: myYuanX2, y: myYuanY2};
                        start_angle = start_angle || 0;
                        if (canvas_tag.getContext) {
            //开始绘制路径
                            ctx = canvas_tag.getContext("2d");
                            ctx.beginPath();
            //画出弧线
                            ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //画出结束半径
                            ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                            if (fill) {
                                ctx.fill();
                            } else {
                                ctx.closePath();
                                ctx.stroke();
                            }
                        } else {
                            alert(‘You need Safari or Firefox 1.5+ to see this demo.‘);
                        }
                    }
            
                })
            </script>
            <![endif]>
            
            </body>

时间： 2024-10-13 10:30:23

兼容IE8的canvas自制圆形比例图的相关文章

canvas如何兼容IE8

大家都知道canvas是个非常好玩的东西,但是IE9以下的浏览器不支持,有时候业务需求必须用到canvas,且又要求兼容IE8浏览器,那怎么办呢? 1.添加对html5的支持:<!--[if IE]> <script src="/public/html5.js" type="text/javascript"></script><![endif]-->2.添加对canvas的支持:下载excanvas_r3.zip,引用

兼容IE8

由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法. 最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容工作的时候不仅叫苦不迭.一个项目下来后,倒是收集了一些志于让HTML5兼容IE8的库,还有一些零散的代码和优雅降级的技巧,整理如下.IE8的兼容工作是个大活,这篇文章还不完整,肯定有很多疏漏和不足,望读者能在评论区指正,同时我也会在之后的项目中逐渐丰富这篇文章. 一.HTML5标签兼容方案:html

CSS3 线性渐变（linear-gradient） 兼容IE8,IE9

一.线性渐变在 Mozilla 下的应用     语法: 1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下.left 是从左到右,如果定义成 left top,那就是从左上角到右下角.第二个和第三个参数分别是起点颜色和终点颜色.你还可以在它们之间插入更多的参数,表示多种颜色的

ICG-智能代码生成器.(权限控制.融入平台).(表单引擎).(最低兼容IE8)

请下拉滚动条... 界面: 1--首先是server制作界面(BS结构).直接上图:   2--点击提交生成一下文件: 各个代表什么一看就懂了...... 3--把上面的文件放到对于的位置.然后编译.然后就ok了.... 打开client中的IBD中的loginin.aspx页面 用admin登陆.(admin未管理员.test为普通用户.这些在平台都可以设置) 登陆进来是这样:其中邮件和分组管理还有用户管理以及app管理都是平台自带的....看下图: 4--现在把刚才生成的app应用加入到平台

jQuery ajax 动态append创建表格出现不兼容ie8

很多情况下,通过js(jQuery1.10)动态来创建一些样式,对页面的动态交互来说是很方便的 但是不同的浏览器针对动态生成的不是很兼容,在此遇见的不兼容ie8,跟各位分享下 代码: json数据 data.json [{"name":"ajax","job":"manong"},{"name":"js","job":"diaosi"}] html

【转】让Bootstrap 3兼容IE8浏览器

FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等.Bootstrap他们预先定义好,等要进行正式制作网页的时候,

让Bootstrap 3兼容IE8浏览器

http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说.有几个点大家要注意. 1.本地调试需要Web Server(如IIS.Apache,Nginx),单纯地本地打开文件不能看到兼容效果. 2.如果你发现已经引用了respond.js和Bootstrap,仍无效果,请查看你的Bootstrap是否使用了CDN文件.(详情看第4点) 3.本文主要针对Boots

HTML5之Canvas画圆形

1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML5之Canvas画圆形</title> </head> <body onLoad="drawFour('canvas')"> <canvas id="canvas" width="1200" height=&

兼容ie8 rgba()用法 滤镜filter的用法

原文  http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到ie8.这个就有点蛋疼了.因为ie8不支持rgba()函数.下面我们总结一下rgba()函数的含义. rgba的含义,r代表red,g代表green,b代表blue,红绿蓝