使用AngularJS实现的万用电表

Interactive Ammeter Gauge，可用于实验室电流电压测量仪器的观测界面。

html5, gauge

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1906
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var app = angular.module("gaugeApp", []);

app.controller("gaugeInput", function($scope, $timeout) {

$scope.gaugeChange = function() {
            $scope.gaugeValue = $scope.cap + '';
            var charge = $scope.gaugeValue + '% 0%';
            TweenMax.to("#chargeStroke", 2, {
                drawSVG: charge
            });

console.log(charge);
            console.log($scope.cap);
            console.log($scope.gaugeValue);

if ($scope.cap <= 33) {
                console.log("I'm still here");
                TweenMax.to("#chargeStroke", 1, {
                    stroke: "#CC1A09",
                    delay: 1
                });

} else {
                TweenMax.to("#chargeStroke", 1, {
                    stroke: "#09CC61",
                    delay: 1
                })
            }
        }

$scope.gaugeAuto = function autoAni() {

function dial() {

$scope.gaugeStop = function() {
                    document.getElementById("chargeStroke").style.stroke = "09CC61";
                    document.getElementById("displayText").style.display = "none";

$timeout(function update() {
                        $scope.gaugeValue = null;
                    }, 3500)
                    TweenMax.set('#chargeStroke', {
                        clearProps: "all",
                        stroke: "#09CC61"
                    });
                    tl.stop();
                    autoOn = false;

TweenMax.to('#buttonStop', .3, {
                        opacity: 0,
                        delay: .3

});
                    TweenMax.set('#buttonStop', {
                        display: "none",
                        delay: .6

});
                }
                document.getElementById("displayText").style.display = "inline-block";
                var charge = Math.floor((Math.random() * 100) + 1) + "";
                var chargeText = charge + "% 0%";
                $scope.gaugeValue = "";
                $timeout(function update() {
                    $scope.gaugeValue = charge;
                }, 3500)
                var tl = new TimelineMax();
                tl.to("#chargeStroke", 2, {
                    drawSVG: chargeText,
                    onComplete: dial,
                    delay: 2
                })
                if (charge <= 33) {
                    TweenMax.to("#chargeStroke", 1, {
                        stroke: "#CC1A09",
                        delay: 3
                    });

} else {
                    TweenMax.to("#chargeStroke", 1, {
                        stroke: "#09CC61",
                        delay: 3
                    })
                }

}

var autoOn = true;
            if (autoOn) {
                TweenMax.set('#buttonStop', {
                    display: "inline-block",
                    opacity: 0,
                    delay: .3,
                    y: 30

});
                TweenMax.to('#buttonStop', .5, {
                    opacity: 1,
                    delay: .3,
                    y: 0

});
            }

dial();

}

)

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

* {
    margin: 0;
}
html,
body {
    width: 100%;
    height: 100%;
    color: #DCFBFF;
    font-family: 'timeburner', sans-serif;
}
.gradBody {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    background: #093f40;
    /* Old browsers */
    
    background: -moz-linear-gradient(-45deg, #093f40 0%, #486666 100%);
    /* FF3.6-15 */
    
    background: -webkit-linear-gradient(-45deg, #093f40 0%, #486666 100%);
    /* Chrome10-25,Safari5.1-6 */
    
    background: linear-gradient(135deg, #093f40 0%, #486666 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
h4 {
    margin: 0;
    font-size: 2.35em;
    letter-spacing: .1em;
    font-family: 'timeburner-bold', sans-serif;
}
h3 {
    margin: 0;
    font-size: 2.4em;
}
.wrapper {
    width: 60%;
    margin: 0px auto;
    background: rgba(5, 33, 33, .6);
    padding: 20px 70px;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.wrapper2 {
    margin: 0 auto;
    width: 80%;
    padding: 5% 10%;
}
.inputBox {
    text-align: center;
}
.scaleUp {
    width: 100%;
}
input {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid rgba(83, 241, 252, 1);
    color: #BFBCBC;
    font-size: 1em;
    width: 80px;
    text-align: center;
}
input:focus {
    outline: none;
}
button {
    background: #DCFBFF;
    border: none;
    border-radius: 0px;
    padding: 8px;
    margin: 10px;
    font-size: .8em;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(83, 241, 252, 1);
}
.inputRow {
    display: inline-block;
    width: 45%;
}
#buttonStop {
    display: none;
}
#buttonAuto {
    transition: 2s;
}

HTML

<div class="inputBox">
            <h4>Battery Capacity</h4>
        </div>

<path id="chargeStroke" clip-path="url(#SVGID_2_)" fill="none" stroke="#09CC61" stroke-width="180" stroke-miterlimit="10" d="M-15.7,452.8c0,0,306.6-188,615-4.5" />
                        </g>
                    </g>
                </g>
            </svg>
            <div class="inputBox">
                <h3><b id="displayText">{{gaugeValue}}</b>%</h3>
            </div>
            <br>
            <br>

<div class="inputRow">
                    <p>Enter Battery Capacity %</p>
                    <input ng-model="cap" />
                    <button ng-click="gaugeChange()">Submit</button>
                </div>
                <div class="inputRow">
                    <p>Automate</p>
                    <button ng-click="gaugeAuto()" class="buttonAuto">Auto</button>
                    <button ng-click="gaugeStop()" id="buttonStop">Stop</button>
                </div>

</div>
        </div>
    </div>
</div>

Interactive Ammeter Gauge，可用于实验室电流电压测量仪器的观测界面。

html5, gauge

编辑器支持Emmet

快捷键

Interactive Ammeter Gauge，可用于实验室电流电压测量仪器的观测界面。

html5, gauge

使用AngularJS实现的数学加减乘除可视化计算器

使用DragulaJS实现的拖拉式文章在线编辑器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：