js实现的经典计算器,Bootstrap左侧下拉三级菜单Web前端

Bootstrap左侧下拉三级菜单,

本文实例讲述了JS实现颜色梯度与渐变效果的方法。分享给大家供大家参考,具体如下:

本文实例讲述了vue.js实现的经典计算器/科学计算器功能。分享给大家供大家参考,具体如下:

在线实例

效果一 效果二 效果三

运行效果图如下:

1. HTML部分:

使用方法

<script src="/api/jq/BootstrapCaidan/js/metismenu.js"></script>
<script>
    $(function () {
        $('#menu').metisMenu();
    });
</script>

  Web前端 1

 


下载

 

在线实例 效果一
效果二 效果三 使用方法
scriptsrc=”/api/jq/BootstrapCaidan/js/metismenu.js”/scriptscript$(function(){$(‘#menu’)…

Web前端 2

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<div id="app">
 <div class="calculator">
  <button @click="changeModeEvent" class="toggle-button">
   <p v-if="changeMode">Show Advanced Mode   ⚈</p>
   <p v-else>Show Basic Mode   ⚆</p>
  </button>
  <div class="results">
   <input class="input" v-model="current" />
  </div>
  <div class="mode" v-if="changeMode">
   <button class="button" @click="press">7</button>
   <button class="button" @click="press">8</button>
   <button class="button" @click="press">9</button>
   <button class="button" @click="press">*</button>
   <button class="button" @click="press"><=</button>
   <button class="button" @click="press">C</button>
   <button class="button" @click="press">4</button>
   <button class="button" @click="press($event)">5</button>
   <button class="button" @click="press">6</button>
   <button class="button" @click="press">/</button>
   <button class="button" @click="press">(</button>
   <button class="button" @click="press">)</button>
   <button class="button" @click="press">1</button>
   <button class="button" @click="press">2</button>
   <button class="button" @click="press">3</button>
   <button class="button" @click="press">-</button>
   <button class="button" @click="press">x 2</button>
   <button class="button" @click="press">±</button>
   <button class="button" @click="press">0</button>
   <button class="button" @click="press">.</button>
   <button class="button" @click="press">%</button>
   <button class="button" @click="press">+</button>
   <button class="button equal-sign" @click="press">=</button> 
  </div>
  <div class="mode" v-else>
   <button class="button" @click="press">sin</button>
   <button class="button" @click="press">cos</button>
   <button class="button" @click="press">tan</button>
   <button class="button" @click="press">x^</button>
   <button class="button" @click="press"><=</button>
   <button class="button" @click="press">C</button>
   <button class="button" @click="press">log</button>
   <button class="button" @click="press">ln</button>
   <button class="button" @click="press">e</button>
   <button class="button" @click="press">°</button>
   <button class="button" @click="press">rad</button>
   <button class="button" @click="press">√</button>
   <button class="button" @click="press">7</button>
   <button class="button" @click="press">8  </button>
   <button class="button" @click="press">9</button>
   <button class="button" @click="press">/</button>
   <button class="button" @click="press">x 2</button>
   <button class="button" @click="press">x !</button>
   <button class="button" @click="press">4</button>
   <button class="button" @click="press">5</button>
   <button class="button" @click="press">6</button>
   <button class="button" @click="press">*</button>
   <button class="button" @click="press">(</button>
   <button class="button" @click="press">)</button>
   <button class="button" @click="press">1</button>
   <button class="button" @click="press">2</button>
   <button class="button" @click="press">3</button>
   <button class="button" @click="press">-</button>
   <button class="button" @click="press">%</button>
   <button class="button" @click="press">±</button>
   <button class="button" @click="press">0</button>
   <button class="button" @click="press">.</button>
   <button class="button" @click="press">π</button>
   <button class="button" @click="press">+</button>          
   <button class="button equal-sign" @click="press">=</button>
  </div>
 </div>
</div>

完整实例代码如下:

2. css部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript 颜色梯度和渐变效果</title>
<script type="text/javascript">
var $ = function (id) {
  return "string" == typeof id ? document.getElementById(id) : id;
};
var Extend = function(destination, source) {
 for (var property in source) {
 destination[property] = source[property];
 }
 return destination;
}
var Map = function(array, callback, thisObject){
 if(array.map){
 return array.map(callback, thisObject);
 }else{
 var res = [];
 for (var i = 0, len = array.length; i < len; i++) { res.push(callback.call(thisObject, array[i], i, array)); }
 return res;
 }
}
var ColorGrads = function(options){
 this.SetOptions(options);
 this.StartColor = this.options.StartColor;
 this.EndColor = this.options.EndColor;
 this.Step = Math.abs(this.options.Step);
};
ColorGrads.prototype = {
 //设置默认属性
 SetOptions: function(options) {
  this.options = {//默认值
 StartColor: "#fff",//开始颜色
 EndColor: "#000",//结束颜色
 Step: 20//渐变级数
  };
  Extend(this.options, options || {});
 },
 //获取渐变颜色集合
 Create: function() {
 var colors = [],
 startColor = this.GetColor(this.StartColor),
 endColor = this.GetColor(this.EndColor),
 stepR = (endColor[0] - startColor[0]) / this.Step,
 stepG = (endColor[1] - startColor[1]) / this.Step,
 stepB = (endColor[2] - startColor[2]) / this.Step;
 //生成颜色集合
 for(var i = 0, n = this.Step, r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){
 colors.push([r, g, b]); r += stepR; g += stepG; b += stepB;
 }
 colors.push(endColor);
 //修正颜色值
 return Map(colors, function(x){ return Map(x, function(x){
 return Math.min(Math.max(0, Math.floor(x)), 255);
 });});
 },
 //获取颜色数据
 GetColor: function(color) {
 if(/^#[0-9a-f]{6}$/i.test(color))
 {//#rrggbb
 return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
  function(x){ return parseInt(x, 16); }
 )
 }
 else if(/^#[0-9a-f]{3}$/i.test(color))
 {//#rgb
 return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
  function(x){ return parseInt(x + x, 16); }
 )
 }
 else if(/^rgb(.*)$/i.test(color))
 {//rgb(n,n,n) or rgb(n%,n%,n%)
 return Map(color.match(/\d+(\.\d+)?\%?/g),
  function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
 )
 }
 else
 {//color
 var mapping = {"red":"#FF0000"};//略
 color = mapping[color.toLowerCase()];
 if(color){
  return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
  function(x){ return parseInt(x, 16); }
  )
 }
 }
 }
};
var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
var Bind = function(object, fun) {
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function() {
 return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
 }
}
//渐变对象
var ColorTrans = function(obj, options){
 this._obj = $(obj);
 this._timer = null;//定时器
 this._index = 0;//索引
 this._colors = [];//颜色集合
 this._grads = new ColorGrads();
 this.SetOptions(options);
 this.Speed = Math.abs(this.options.Speed);
 this.CssColor = this.options.CssColor;
 this._startColor = this.options.StartColor || CurrentStyle(this._obj)[this.CssColor];
 this._endColor = this.options.EndColor;
 this._step = Math.abs(this.options.Step);
 this.Reset();
 this.SetColor();
};
ColorTrans.prototype = {
 //设置默认属性
 SetOptions: function(options) {
 this.options = {//默认值
 StartColor: "",//开始颜色
 EndColor: "#000",//结束颜色
 Step: 20,//渐变级数
 Speed: 20,//渐变速度
 CssColor: "color"//设置属性(Scripting属性)
 };
  Extend(this.options, options || {});
 },
 //重设颜色集合
 Reset: function(color) {
 //修改颜色后必须重新获取颜色集合
 color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
 //设置属性
 this._grads.StartColor = this._startColor = color.StartColor;
 this._grads.EndColor = this._endColor = color.EndColor;
 this._grads.Step = this._step = color.Step;
 //获取颜色集合
 this._colors = this._grads.Create();
 this._index = 0;
 },
 //颜色渐入
 FadeIn: function() {
 this.Stop(); this._index++; this.SetColor();
 if(this._index < this._colors.length - 1){
 this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed);
 }
 },
 //颜色渐出
 FadeOut: function() {
 this.Stop(); this._index--; this.SetColor();
 if(this._index > 0){
 this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed);
 }
 },
 //颜色设置
 SetColor: function() {
 var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
 this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
 },
 //停止
 Stop: function() {
 clearTimeout(this._timer);
 }
};
</script>
</head>
<body>
<style type="text/css">
#idGrads{}
#idGrads div{ font-size:0;height:1px;}
</style>
<div id="idGrads"> </div>
<script>
var forEach = function(array, callback, thisObject){
 if(array.forEach){
 array.forEach(callback, thisObject);
 }else{
 for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
 }
}
var colors = new ColorGrads({ StartColor: "#fff", EndColor: "rgb(20,127,0)" }).Create();
forEach(colors.concat().concat(colors.reverse()), function(x){
 $("idGrads").innerHTML += "<div style=\"background-color:"+"rgb(" + x[0] + "," + x[1] + "," + x[2] + ");\"></div>";
})
</script>
<Br />
<Br />
<style type="text/css">
#idMenu{ background:#DBDBDB;text-align:center;line-height:25px; table-layout:fixed;}
#idMenu td{ cursor:pointer;}
</style>
<table id="idMenu" width="600" border="0" cellspacing="5" cellpadding="0">
 <tr>
 <td onclick="location.href='#'">Cropper</td>
 <td onclick="location.href='#'">Tween</td>
 <td onclick="location.href='#'">Slider</td>
 <td onclick="location.href='#'">Resize</td>
 <td onclick="location.href='#'">Drag</td>
 </tr>
</table>
<script>
forEach($("idMenu").getElementsByTagName("td"), function(x, i){
 var ct1 = new ColorTrans(x, { StartColor: "#666", EndColor: "#fff" });
 var ct2 = new ColorTrans(x, { StartColor: "#f6f6f6", EndColor: "rgb(20,150,0)", CssColor: "backgroundColor" });
 x.onmouseover = function(){ ct1.FadeIn(); ct2.FadeIn(); }
 x.onmouseout = function(){ ct1.FadeOut(); ct2.FadeOut(); }
})
</script>
<Br />
<Br />
<div id="idRandom" style="padding:10px;color:#fff; background-color:#CCC;">点击随机换颜色</div>
<script>
var ctRandom = new ColorTrans("idRandom", { EndColor: "#CCC", CssColor: "backgroundColor" })
$("idRandom").onclick = function(){
 var rgb = Map([1,1,1], function(){ return Math.floor((Math.random() * 255)); } );
 ctRandom.Reset({ StartColor: this.style.backgroundColor, EndColor: "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")" })
 ctRandom.FadeIn();
}
</script>
</body>
</html>
body {
 background: linear-gradient(to right, #85D8CE, #085078);
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-item: center;
}
.calculator {
 width: 440px;
 padding: 20px;
 border-radius: 5px;
 margin: 20px auto;
 font-size: 16px;
 background-color: #333333;
}
.input {
 width: 420px;
 height: 50px;
 border-radius: 0px;
 border: 1px solid black;
 background-color: #333333;
 color: #d9d9d9;
 padding: 0 5px 0 5px;
 margin: 0 0px 10px 0px;
 font-size: 30px;
}
.input:focus,
.input:active {
 border-color: #03a9f4;
 box-shadow: 0 0 4px #03A9F4;
 outline: none 0;
}
.button {
 margin: 3px;
 width: 63px;
 border: 1px solid #0d0d0d;
 height: 30px;
 border-radius: 4px;
 color: #d9d9d9;
 background-color: #1a1a1a;
 cursor: pointer;
 outline: none;
}
.mode {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
}
.equal-sign {
 background-color: green;
 width: 133px;
}
.toggle-button {
 border: none;
 background-color: #333333;
 cursor: pointer;
 outline: none;
 font-size: 1rem;
 color: #fff;
 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35);
}
p {
 margin-top: 0;
}
button::-moz-focus-inner {
 border-color: transparent;
}

PS:这里再为大家推荐几款本站的相关在线工具:

3. js部分:

在线RGB、HEX颜色代码生成器:

let app = new Vue({
 el: '#app',
 data () {
  return{ 
   current: '',
   changeMode: true
  }
 },
 methods: {
  press: function (event) {
   let me = this
   let key = event.target.textContent
   if (
    key != '=' && 
    key != 'C' &&
    key != '*' &&
    key != '/' &&
    key != '√' &&
    key != "x 2" &&
    key != "%" &&
    key != "<=" && 
    key != "±" && 
    key != "sin" && 
    key != "cos" && 
    key != "tan" && 
    key != "log" && 
    key != "ln" && 
    key != "x^" && 
    key != "x !" && 
    key != "π" && 
    key != "e" && 
    key != "rad" && 
    key != "°"
   ) {
    me.current += key
   } else if (key === '=') {
    if ((me.current).indexOf('^') > -1) {
     let base = (me.current).slice(0, (me.current).indexOf('^'))
     let exponent = (me.current).slice((me.current).indexOf('^') + 1)
     me.current = eval('Math.pow(' + base + ',' + exponent + ')')
    } else {
     me.current = eval(me.current)
    }
   } else if (key === 'C') {
    me.current = ''
   } else if (key === '*') {
    me.current += '*'
   } else if (key === '/') {
    me.current += '/'
   } else if (key === '+') {
    me.current += '+'
   } else if (key === '-') {
    me.current += '-'
   } else if (key === '±') {
    if ((me.current).charAt(0) === '-') {
     me.current = (me.current).slice(1)
    } else {
     me.current = '-' + me.current
    }
   } else if (key === '<=') {
    me.current = me.current.substring(0, me.current.length - 1)
   } else if (key === '%') {
    me.current = me.current / 100
   } else if (key === 'π') {
    me.current = me.current * Math.PI
   } else if (key === 'x 2') {
    me.current = eval(me.current * me.current)
   } else if (key === '√') {
    me.current = Math.sqrt(me.current)
   } else if (key === 'sin') {
    me.current = Math.sin(me.current)
   } else if (key === 'cos') {
    me.current = Math.cos(me.current)
   } else if (key === 'tan') {
    me.current = Math.tan(me.current)
   } else if (key === 'log') {
    me.current = Math.log10(me.current)
   } else if (key === 'ln') {
    me.current = Math.log(me.current)
   } else if (key === 'x^') {
    me.current += '^'
   } else if (key === 'x !') {
    let number = 1
    if (me.current === 0) {
     me.current = '1'
    } else if (me.current < 0) {
     me.current = NaN
    } else {
     let number = 1
     for (let i = me.current; i > 0; i--) {
      number *= i
     }
     me.current = number
    }
   } else if (key === 'e') {
    me.current = Math.exp(me.current)
   } else if (key === 'rad') {
    me.current = me.current * (Math.PI / 180)
   } else if (key === '°') {
    me.current = me.current * (180 / Math.PI)
   }
  },
  changeModeEvent: function() {
   let me = this
   me.changeMode = !me.changeMode
  }
 }
})

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全:

完整实例代码如下:

在线网页调色板工具:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net vue.js计算器</title>
<style>
body {
 background: linear-gradient(to right, #85D8CE, #085078);
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-item: center;
}
.calculator {
 width: 440px;
 padding: 20px;
 border-radius: 5px;
 margin: 20px auto;
 font-size: 16px;
 background-color: #333333;
}
.input {
 width: 420px;
 height: 50px;
 border-radius: 0px;
 border: 1px solid black;
 background-color: #333333;
 color: #d9d9d9;
 padding: 0 5px 0 5px;
 margin: 0 0px 10px 0px;
 font-size: 30px;
}
.input:focus,
.input:active {
 border-color: #03a9f4;
 box-shadow: 0 0 4px #03A9F4;
 outline: none 0;
}
.button {
 margin: 3px;
 width: 63px;
 border: 1px solid #0d0d0d;
 height: 30px;
 border-radius: 4px;
 color: #d9d9d9;
 background-color: #1a1a1a;
 cursor: pointer;
 outline: none;
}
.mode {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
}
.equal-sign {
 background-color: green;
 width: 133px;
}
.toggle-button {
 border: none;
 background-color: #333333;
 cursor: pointer;
 outline: none;
 font-size: 1rem;
 color: #fff;
 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35);
}
p {
 margin-top: 0;
}
button::-moz-focus-inner {
 border-color: transparent;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<div id="app">
 <div class="calculator">
  <button @click="changeModeEvent" class="toggle-button">
   <p v-if="changeMode">Show Advanced Mode   ⚈</p>
   <p v-else>Show Basic Mode   ⚆</p>
  </button>
  <div class="results">
   <input class="input" v-model="current" />
  </div>
  <div class="mode" v-if="changeMode">
   <button class="button" @click="press">7</button>
   <button class="button" @click="press">8</button>
   <button class="button" @click="press">9</button>
   <button class="button" @click="press">*</button>
   <button class="button" @click="press"><=</button>
   <button class="button" @click="press">C</button>
   <button class="button" @click="press">4</button>
   <button class="button" @click="press($event)">5</button>
   <button class="button" @click="press">6</button>
   <button class="button" @click="press">/</button>
   <button class="button" @click="press">(</button>
   <button class="button" @click="press">)</button>
   <button class="button" @click="press">1</button>
   <button class="button" @click="press">2</button>
   <button class="button" @click="press">3</button>
   <button class="button" @click="press">-</button>
   <button class="button" @click="press">x 2</button>
   <button class="button" @click="press">±</button>
   <button class="button" @click="press">0</button>
   <button class="button" @click="press">.</button>
   <button class="button" @click="press">%</button>
   <button class="button" @click="press">+</button>
   <button class="button equal-sign" @click="press">=</button> 
  </div>
  <div class="mode" v-else>
   <button class="button" @click="press">sin</button>
   <button class="button" @click="press">cos</button>
   <button class="button" @click="press">tan</button>
   <button class="button" @click="press">x^</button>
   <button class="button" @click="press"><=</button>
   <button class="button" @click="press">C</button>
   <button class="button" @click="press">log</button>
   <button class="button" @click="press">ln</button>
   <button class="button" @click="press">e</button>
   <button class="button" @click="press">°</button>
   <button class="button" @click="press">rad</button>
   <button class="button" @click="press">√</button>
   <button class="button" @click="press">7</button>
   <button class="button" @click="press">8  </button>
   <button class="button" @click="press">9</button>
   <button class="button" @click="press">/</button>
   <button class="button" @click="press">x 2</button>
   <button class="button" @click="press">x !</button>
   <button class="button" @click="press">4</button>
   <button class="button" @click="press">5</button>
   <button class="button" @click="press">6</button>
   <button class="button" @click="press">*</button>
   <button class="button" @click="press">(</button>
   <button class="button" @click="press">)</button>
   <button class="button" @click="press">1</button>
   <button class="button" @click="press">2</button>
   <button class="button" @click="press">3</button>
   <button class="button" @click="press">-</button>
   <button class="button" @click="press">%</button>
   <button class="button" @click="press">±</button>
   <button class="button" @click="press">0</button>
   <button class="button" @click="press">.</button>
   <button class="button" @click="press">π</button>
   <button class="button" @click="press">+</button>          
   <button class="button equal-sign" @click="press">=</button>
  </div>
 </div>
</div>
<script>
let app = new Vue({
 el: '#app',
 data () {
  return{ 
   current: '',
   changeMode: true
  }
 },
 methods: {
  press: function (event) {
   let me = this
   let key = event.target.textContent
   if (
    key != '=' && 
    key != 'C' &&
    key != '*' &&
    key != '/' &&
    key != '√' &&
    key != "x 2" &&
    key != "%" &&
    key != "<=" && 
    key != "±" && 
    key != "sin" && 
    key != "cos" && 
    key != "tan" && 
    key != "log" && 
    key != "ln" && 
    key != "x^" && 
    key != "x !" && 
    key != "π" && 
    key != "e" && 
    key != "rad" && 
    key != "°"
   ) {
    me.current += key
   } else if (key === '=') {
    if ((me.current).indexOf('^') > -1) {
     let base = (me.current).slice(0, (me.current).indexOf('^'))
     let exponent = (me.current).slice((me.current).indexOf('^') + 1)
     me.current = eval('Math.pow(' + base + ',' + exponent + ')')
    } else {
     me.current = eval(me.current)
    }
   } else if (key === 'C') {
    me.current = ''
   } else if (key === '*') {
    me.current += '*'
   } else if (key === '/') {
    me.current += '/'
   } else if (key === '+') {
    me.current += '+'
   } else if (key === '-') {
    me.current += '-'
   } else if (key === '±') {
    if ((me.current).charAt(0) === '-') {
     me.current = (me.current).slice(1)
    } else {
     me.current = '-' + me.current
    }
   } else if (key === '<=') {
    me.current = me.current.substring(0, me.current.length - 1)
   } else if (key === '%') {
    me.current = me.current / 100
   } else if (key === 'π') {
    me.current = me.current * Math.PI
   } else if (key === 'x 2') {
    me.current = eval(me.current * me.current)
   } else if (key === '√') {
    me.current = Math.sqrt(me.current)
   } else if (key === 'sin') {
    me.current = Math.sin(me.current)
   } else if (key === 'cos') {
    me.current = Math.cos(me.current)
   } else if (key === 'tan') {
    me.current = Math.tan(me.current)
   } else if (key === 'log') {
    me.current = Math.log10(me.current)
   } else if (key === 'ln') {
    me.current = Math.log(me.current)
   } else if (key === 'x^') {
    me.current += '^'
   } else if (key === 'x !') {
    let number = 1
    if (me.current === 0) {
     me.current = '1'
    } else if (me.current < 0) {
     me.current = NaN
    } else {
     let number = 1
     for (let i = me.current; i > 0; i--) {
      number *= i
     }
     me.current = number
    }
   } else if (key === 'e') {
    me.current = Math.exp(me.current)
   } else if (key === 'rad') {
    me.current = me.current * (Math.PI / 180)
   } else if (key === '°') {
    me.current = me.current * (180 / Math.PI)
   }
  },
  changeModeEvent: function() {
   let me = this
   me.changeMode = !me.changeMode
  }
 }
})
</script>
</body>
</html>

在线颜色选择器工具/RGB颜色查询对照表:

使用本站HTML/CSS/JS在线运行测试工具:,可得到如下测试运行效果:

更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

Web前端 3

希望本文所述对大家JavaScript程序设计有所帮助。

PS:这里再为大家推荐几款计算工具供大家参考:

您可能感兴趣的文章:

  • js实现颜色阶梯渐变效果(Gradient算法)
  • JavaScript实现的鼠标响应颜色渐变效果完整实例
  • jQuery与js实现颜色渐变的方法
  • 漂亮! js实现颜色渐变效果
  • 使用three.js 画渐变的直线
  • 神奇!js+CSS+DIV实现文字颜色渐变效果
  • js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
  • javascript计算渐变颜色的实例

在线数学表达式简单转换/计算工具:

在线一元函数(方程)求解计算工具:

科学计算器在线使用_高级计算器在线计算:

在线计算器_标准计算器:

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

  • Vue.js实现的计算器功能完整示例
  • Vue.js实现价格计算器功能
  • Vue.js每天必学之计算属性computed与$watch
  • Vue
    computed计算属性的使用方法
  • Vue计算属性的使用
  • Vue.js计算属性computed与watch(5)
  • Vue.js教程之计算属性
  • vue实现简单实时汇率计算功能
  • vue中计算属性(computed)、methods和watched之间的区别
  • vue2.0中vue-cli实现全选、单选计算总价格的实例代码
  • vue中的计算属性的使用和vue实例的方法示例