JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<h3>demo1:步长为0.8，下限为0, 默认是1</h3>
	<div id="demo1"></div>
	<button id="s40">设为40</button><button id="increase">加一步</button><button id="decrease">减一步</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

CSS

.data-amount-wrap{position:relative;height:28px;display:block}
	.data-amount-input{
		color: #666;
		font-size: 12px;
		margin:0;
		padding:3px 2px 0 3px;
		height:26px;
		border:1px solid;
		border-color:#848484 #E0E0E0 #E0E0E0 #848484;
		width:60px;
		line-height:26px;
		margin-left:16px;
	}
	.data-amount-increase,.data-amount-decrease{
		position: absolute;
		/*width:16px;height: 14px;*/cursor: pointer;
		width:0;height:0;overflow:hidden;
		border-style:solid;
	}
	.data-amount-increase{left:85px;top:1px;border-width: 14px 0 14px 14px;border-color:transparent  transparent  transparent green;}
	.data-amount-decrease{left:0;top:1px;border-width: 14px 14px 14px 0;border-color:transparent red transparent  transparent ;}
	button{margin:15px 0 0;}

JavaScript

/**
 * 数量输入控件
 */

 function Amount(options) {
	
	this.config = {
		container : '',      // 必须，控件插入的容器 默认为空
		val       : 1,       // 初始值 默认为1
		step      : 1,       // 一次改变的变化值 默认为1
		minVal    : 0,       // 限下值 默认为0
		maxVal    : 100,     // 限上值 默认为100
		elCls     : 'data',  // 自定义的前缀的类名 默认为data
		prevFunc  : null,    // 点击上一页回调函数
		nextFunc  : null     // 点击下一页回调函数
	};

	this.cache = {
		decimalLen : 1  // 默认为1
	};

	this.init(options);
 }
 
 Amount.prototype = {
	
	constructor: Amount,

	init:function(options){
		
		this.config = $.extend(this.config,options || {});
		var self = this,
			_config = self.config,
			_cache = self.cache;
		
		// 先判断传进来的容器类型
		self._type();
		
		// 渲染HTML代码
		self._renderHTML();
		
		// 点击事件
		self._bindEnv();
	},
	/*
	 * 判断传进来的容器参数类型
	 */
	_type: function(){
		var self = this,
			_config = self.config,
			_cache = self.cache;
		if(_config.container != '') {

			if($.isPlainObject(_config.container)) {
			_config.container = _config.container;

			}else if(/^\./.test(_config.container)){
				_config.container = $(_config.container);

			}else if(/^#/.test(_config.container)) {
				_config.container = $(_config.container);

			}else if($('#' + _config.container)) {
				_config.container = $('#' + _config.container);

			}else {
				alert('传参的类型有误!请重新传参!');
			}

		}else {
			return;
		}
	},
	/*
	 * 渲染html
	 */
	_renderHTML: function(){
		var self = this,
			_config = self.config,
			_cache = self.cache;
		var html = '';
		html += '<span class="'+_config.elCls+'-amount-wrap">' + 
				    '<input type="text" title="请输入数字" value="'+_config.val+'" class="'+_config.elCls+'-amount-input"/>' +
			        '<span class="'+_config.elCls+'-amount-increase"></span>' + 
					'<span class="'+_config.elCls+'-amount-decrease"></span>' + 
				'</span>';
		$(_config.container).append(html);
	},
	/*
	 * 点击事件
	 */
	_bindEnv: function() {
		var self = this,
			_config = self.config,
			_cache = self.cache;

		// 点击事件...