function formatPrice(list,field,price) {
list.forEach(item => {
item[field] = price//实际处理的代码
if (item.children) {
if (item.children.length === 0) {
delete item.children;
} else if (item.children.length > 0) {
formatPrice(item.children,field,price);
}
}
});
return data;
}
window.open 跳转被拦截替换方案
var form = document.createElement('form');
form.action = 'http://google.com';
form.target = '_blank';
form.method = 'get';
document.body.appendChild(form);
form.submit();
css图片单页
页面就一张图片,无论PC或mobile打开都让图片充满整个屏幕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>剧本鲨俱乐部!</title>
<style>
*{
margin:0;
padding:0;
}
.box {
width: auto;
height: 100%
}
.box img {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div class="box">
<img src="photo_2023-06-17_21-49-52.jpg" />
</div>
</body>
</html>
input type="range" 滑块
[type="range"] {
border:none !important;
outline: none !important;
-webkit-appearance: none;
appearance: none;
margin: 0;
background-color: transparent;
width: 500px;
}
[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background: #eee;
}
[type="range" i]::-webkit-slider-container {
height: 20px;
overflow: hidden;
}
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f44336;
border: 1px solid transparent;
margin-top: -8px;
border-image: linear-gradient(#f44336,#f44336) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
}
<input type="range" name="salary" class="form-control mb-3" step="10" min="1000" max="50000">
效果图
layer 通用相册弹出
JS代码
body.on('click', '[layer-pid]', function () {
let currentId = $(this).attr('layer-pid');
let photosList = $(this).closest('.photos-list');
let data = {
"title": "", //相册标题
"id": photosList.attr('class'), //相册id
"start": currentId, //初始显示的图片序号,默认0
"data": [ //相册包含的图片,数组格式
]
};
console.log(data);
photosList.find('img').each(function () {
let pid = $(this).attr('layer-pid');
let src = $(this).attr('src');
data.data.push({
alt: '图片预览',
pid: pid,
src: src,
thumb: src
});
});
layer.photos({
photos: data
, anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
});
HTML
<div id="upload-photo" class="flex upload-have-bottom-description flex photos-list">
{% for key,img in item.images %}
<div class="sharing-icons c-img-list list_imahe">
<img layer-pid="{{ key }}" class="" src="{{ img }}">
</div>
{% endfor %}
</div>