🙏废话不多说系列，直接开整🙏
1. if/else 逻辑判断语句书写逻辑分支处理：
const functionA = () => {/* do something */}
const functionB = () => {/* do something */}
const functionC = () => {/* do something */}
const actions = new Map([
['guest_1', () => {functionA}],
['guest_2', () => {functionC}],
['guest_3', () => {functionA}],
['default', () => {functionC}]
])
/**
* 按钮点击事件
* @param {string} identity 身份标识：guest客态 master主态
* @param {number} status 活动状态：1.开票中，2.开票失败，3.开票成功，4.商品售罄，5.有库存未开团
*/
const onButtonClick = (identity, status) => {
let action = actions.get('${identity}_${status}') || actions.get('default')
action.call(this)
}
2. JS 判断字符串出现最多的字符，并统计次数
/**
* 判断一个字符串中出现次数最多的字符，并统计这个字符出现的次数
* @param {string} str
*/
function countStr(str) {
var obj = [];
for (var i = 0, len = str.length, k; i < len; i++) {
k = str.charAt(i);
if (obj[k]) {
obj[k]++;
} else {
obj[k] = 1;
}
}
var m = 0, i = null;
for (var k in obj) {
if (obj[k] > m) {
m = obj[k];
i = k;
}
}
return i + ":" + m;
}
3. 判断当前文件是否存在指定的ID
// 第一种写法：JavaScript
function exist(id) {
var flag = document.getElementById(id);
if (flag) {
return true;
} else {
return false;
}
}
// 第二种写法：jQuery
function exist_jq(id) {
var flag = $("#"+ id +"").attr(id);
if(flag){return true;} else {return false;}
}
4. 按下 enter 直接搜索
<script type="text/javascript">
$(function () {
// enter 直接搜索
document.onkeydown = function (event) {
var e = event || window.event ||arguments.callee.caller.arguments[0];
if (e && e.keyCode === 13) {
//执行的函数
// $('#searchForm').submit();
}
};
});
</script>
HTML代码如下：
<form id="searchForm" method="post" action="list.ht">……</form>
5. 页面文本溢出效果
① HTML 代码
<div class=”wrapperOne”>
this is a text , it is very long long long and long
</div>
② CSS 源码
height: 50px;
border: 1px solid pink;
width: 200px; /* 1.给需要做溢出处理的文本元素设置width或者max-width */
overflow:hidden; /* 2.超出部分省略 overflow:hidden */
text-overflow:ellipsis; /* 3.文本溢出处理方式 text-overflow: ellipsis | clip | 自定义字符 如：“_” “.” */
white-space:nowrap; /* 4.设置文本不换行 white-space: nowrap */
③ 效果展示
6. 下拉选择器 select 得到选中值（JavaScript）
<select onchange="selectChange(this)">
<option value="500">500米</option>
<option value="1000">1000米</option>
<option value="3000">3000米</option>
<option value="5000">5000米</option>
</select>
<script>
//方法一
function selectChange(that) {
console.log(that.value);
}
//方法二
let selectDom = document.querySelector('select'); //获取下拉框元素
selectDom.onchange = function() {
let index = this.options.selectedIndex;
let value = this.options[index].value;
console.log(value);
}
// 直接获取指定select 选中值
var selectedVal = $('#mySelect option:selected').val();
//箭头函数的写法
//selectDom.onchange = () => {
// console.log(selectDom.value);
//};
</script>
7. JSP 前端文字竖列居中显示
① HTML 代码
<center><div id="wordId">安徽建工小贷有限公司</div></center>
② CSS 样式
#wordId {
width: 50px;
font-size: 50px;
word-wrap: break-word;
}
③ 效果展示
8. JavaScript 金额校验（保留两位小数）
① JavaScript 部分：
// 函数1：通过ID定位（jQuery写法）
function checkMoneyLegalById(id) {
var moneyAfterBg = $("#"+id).val();
moneyAfterBg = moneyAfterBg.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
moneyAfterBg = moneyAfterBg.replace(/^\./g,""); //验证第一个字符是数字而不是字符
moneyAfterBg = moneyAfterBg.replace(/\.{2,}/g,"."); //只保留第一个.清除多余的
moneyAfterBg = moneyAfterBg.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
moneyAfterBg = moneyAfterBg.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
$("#"+id).val(moneyAfterBg);
}
// 函数2：对输入金额进行校验
function clearNoNum(obj){
obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字而不是字符
obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个.清除多余的
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
}
② HTML 部分：
<label style="width:100px; margin-left: 115px;">缴费金额:</label>
<input type="text" id=”needPayMoney” name="payment"
value="${(merchants.payment)!}" οnkeyup="clearNoNum(this)"/>
🙏至此，非常感谢阅读🙏
