Angular--小小调色板

代码
效果图
说明
在线演示

学习资源推荐： https://blog.csdn.net/qq_42813491/article/details/90213353

代码

<!DOCTYPE html>
<html lang="en" ng-app="app"><!-- 引入控制程序 -->
<head><meta charset="UTF-8"><title>双向数据绑定--调色板</title><script src="angular.min.js"></script></head>
<body>
<!-- 实例化控制器，格式：类名-as-实例名 --><div ng-controller="MainCtrl as mainCtrl" ng-style="mainCtrl.render();"><h3>小小调色板</h3><p><input type="range"  min="0" max="255" ng-model="mainCtrl.R"><input type="number" min="0" max="255" ng-model="mainCtrl.R">R:{{mainCtrl.R}}</p><p><input type="range" min="0" max="255" ng-model="mainCtrl.G"><input type="number" min="0" max="255" ng-model="mainCtrl.G">G:{{mainCtrl.G}}</p><p><input type="range" min="0" max="255" ng-model="mainCtrl.B"><input type="number" min="0" max="255" ng-model="mainCtrl.B">B:{{mainCtrl.B}}</p><p><input type="range" min="0" max="1"  step="0.01" ng-model="mainCtrl.A"><input type="number" min="0" max="1" step="0.01" ng-model="mainCtrl.A">A:{{mainCtrl.A}}</p></div>
<script>var app=angular.module("app",[])//定义控制程序，用ng-app指令引用app.controller("MainCtrl",[function(){//定义控制器，用ng-controller指令引用//定义属性RGBAthis.R=111;this.G=204;this.B=200;this.A=1;//定义函数renderthis.render=function(){return {"background-color":"rgba("+this.R+","+this.G+","+this.B+","+this.A+")","width":"400px","margin":"100px auto","text-align":"center","height":"280px"};}}])
</script>
</body>
</html>

效果图

说明

ng-style也是angular内置指令，用来获取样式

在线演示

http://lengyuexin.coding.me/palette/

Angular--小小调色板相关推荐

我为什么选择Angular 2？
没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷:它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前景怎样?好就业吗?好招人吗?组建团队容易吗? ...
如何在Angular Material中制作自定义主题
by Charlee Li 通过李李如何在Angular Material中制作自定义主题 (How to make a custom theme in Angular Material) Angu ...
前端圈小可爱 Vue 的自白：我年少成名，却又屡陷 React、Angular 混战
我的出生,注定是不凡的历史大家好,我叫 Vue,今年 6 岁,是一款渐进式的 JavaScript 框架.这是我老爸,他是一位乐于分享.阳光帅气的程序员.我特别特别崇拜他! 我轻巧活泼,人见人爱.2 ...
解密Angular WebWorker Renderer (二)
很开心再次遇见你,接着上回分解. 先把与通讯相关的类介绍完毕. 与WebWorkerRendererFactory2类对应的就是WebWorkerRenderer2类,该类从类结构中就可以看出包含了各 ...
图像颜色处理(一)----由LCD屏幕显示像素格式引出的思考(调色板，CLUT)
先给自己打个广告,本人的微信公众号正式上线了,搜索:张笑生的地盘,主要关注嵌入式软件开发,股票基金定投,足球等等,希望大家多多关注,有问题可以直接留言给我,一定尽心尽力回答大家的问题一 what ( ...
Angular(4)中加载Arcgis for JavaScript地图
背景近期我司项目的需要,采用Angular(4)+SpringBoot前后端分离的架构.并且在需要在项目中实现Arcgis地图. 本人之前有过Arcgis for JavaScript的小小填坑经验 ...
Angular No name was provided for external module 'XXX' in output.globals 错误
Angular 7 开发自定义库时,引用ngZorroAntd,build过程中出现 No name was provided for external module 'ng-zorro-antd' ...
angular.isUndefined()
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ang ...
CSS单位分析及CSS颜色表示法、颜色表（调色板）
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...

Angular--小小调色板

Angular--小小调色板

代码

效果图

说明

在线演示

Angular--小小调色板相关推荐

最新文章

热门文章