js获取svg长度
<script type="text/javascript">
var path = document.getElementById('s4');
var length = path.getTotalLength();
console.log("Path length:", length);
</script>分类 js 下的文章
使用swiper构建自动分组的item，支持自定义swiper参数
function getSwiper(itemWrap, groupNum, swiperOpt) {
if (swiperOpt === void 0) {
swiperOpt = {};
}
var $wrap = $(itemWrap);
var $items = $wrap.children('.item');
if (!$items.length) return;
var swiperId = 'swiper-' + Date.now() + Math.random().toString(36).substr(2, 5);
var paginationId = swiperId + '-pagination';
var swiperHtml =
'<div class="swiper-container ' + swiperId + '">' +
'<div class="swiper-wrapper"></div>' +
'<div class="swiper-pagination" id="' + paginationId + '"></div>' +
'</div>';
$wrap.after(swiperHtml);
var $wrapper = $('.' + swiperId + ' .swiper-wrapper');
for (var i = 0; i < $items.length; i += groupNum) {
var $slide = $('<div class="swiper-slide"></div>');
$items.slice(i, i + groupNum).appendTo($slide);
$wrapper.append($slide);
}
var defaultOpt = {
pagination: { el: '#' + paginationId, clickable: true },
spaceBetween: 10,
slidesPerView: 1
};
var finalOpt = {};
for (var key in defaultOpt) {
finalOpt[key] = defaultOpt[key];
}
for (var key in swiperOpt) {
finalOpt[key] = swiperOpt[key];
}
$wrap.remove();
new Swiper('.' + swiperId, finalOpt);
}
//调用
getSwiper('.slide-p1a', 4, {
loop: true,
autoplay: {delay: 6000,stopOnLastSlide: false,disableOnInteraction: false,},
navigation: { nextEl: ".slide-p1ap .next", prevEl: ".slide-p1ap .prev" },
});
将视频封装成canwas播放，防止国产浏览器对视频骚操作
// 封装的Canvas视频播放器函数
function createCanvasVideoPlayer(container, videoUrl) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.createElement('video');
video.src = videoUrl;
video.crossOrigin = 'anonymous';
video.loop = true;
video.muted = true;
video.playsInline = true;
function resizeCanvas() {
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
container.appendChild(canvas);
function drawVideoFrame() {
if (video.paused || video.ended) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
const videoAspectRatio = video.videoWidth / video.videoHeight;
const canvasAspectRatio = canvas.width / canvas.height;
let renderWidth, renderHeight, offsetX, offsetY;
if (videoAspectRatio > canvasAspectRatio) {
renderHeight = canvas.height;
renderWidth = video.videoWidth * (renderHeight / video.videoHeight);
offsetX = (canvas.width - renderWidth) / 2;
offsetY = 0;
} else {
renderWidth = canvas.width;
renderHeight = video.videoHeight * (renderWidth / video.videoWidth);
offsetX = 0;
offsetY = (canvas.height - renderHeight) / 2;
}
ctx.drawImage(video, offsetX, offsetY, renderWidth, renderHeight);
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(drawVideoFrame);
}
video.addEventListener('loadedmetadata', () => {
video.play().then(() => {
drawVideoFrame();
}).catch(e => {
console.error('自动播放失败:', e);
// 如果自动播放失败，用户交互后重新尝试
document.addEventListener('click', () => {
video.play();
}, { once: true });
});
});
video.addEventListener('ended', () => {
video.currentTime = 0;
video.play();
});
return {
play: function() {
video.play();
drawVideoFrame();
},
pause: function() {
video.pause();
}
};
}
// 使用示例
const videoUrl = 'bg5.mp4';
const player = createCanvasVideoPlayer(document.getElementById('videoBackground'), videoUrl);
console.log(player)极致cms详情页获取多附件字段信息，使用foreach输出并实现文件下载
1.放入以下函数到conf/FunctionsExt.php
//修正多附件字段
function fixFile($data){
if($data){
$inputStr = $data;
$segments = explode('||', $inputStr);
$segments = array_filter($segments, function($item) {
return trim($item) !== '';
});
//提取标题和顺序
$pathToTitle = [];
$pathOrderMap = [];
$order = 1;
foreach ($segments as $segment) {
if (empty(trim($segment))) continue;
$parts = explode('|', $segment, 2);
if (count($parts) === 2) {
$path = trim($parts[0]);
$title = trim($parts[1]);
$pathToTitle[$path] = $title;
$pathOrderMap[$path] = $order++;
}
}
//获取url字符串
$quotedUrls = [];
foreach ($segments as $item) {
$parts = explode('|', $item, 2);
$url = trim($parts[0] ?? '');
if (!empty($url)) {
$quotedUrls[] = '"' . $url . '"';
}
}
$orders = 'addtime desc';
$sql = ' litpic in ('.implode(',',$quotedUrls).') ';
$fres = M('pictures')->findAll($sql,$orders);
foreach($fres as $k=>$v){
$url = $fres[$k]['litpic'];
$fres[$k]['title'] = $pathToTitle[$url];
$fres[$k]['orders'] = $pathOrderMap[$url];
}
usort($fres, function($a, $b) {
return $a['orders'] - $b['orders'];
});
return $fres;
}else{
return [];
}
}
2.前台HomeController.php在function jizhi_details($id){}中使用
//重构附件files字段
if(array_key_exists('files',$details)){
$this->files = fixFile($details['files']);
}
3.在前台Common控制器添加下载处理函数
function download() {
if($_POST){
$id = $this->frparam('fid',1,'POST');
$file_name =$this->frparam('file_name',1,'POST');
if(!$id||!$file_name){
http_response_code(405);
//echo "错误：参数缺失";
exit;
}
if (!preg_match('/^[\w\x{4e00}-\x{9fa5}\-]+$/u', $file_name)) {
http_response_code(405);
//echo "错误：文件名包含非法字符";
exit;
}
$fres = M('pictures')->find(['id'=> $id]);
if($fres){
$file_url = $fres['litpic'];
$now =date('Ymd_His', time());
$download_name = $file_name.$now. '.' . $fres['filetype'];
if (file_exists(APP_PATH.$file_url) && is_file(APP_PATH.$file_url)) {
$fileSize = filesize(APP_PATH.$file_url);
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="' . basename($download_name) . '"');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . $fileSize);
readfile(APP_PATH.$file_url);
exit;
}else{
http_response_code(404);
//echo "错误：文件不存在。";
exit;
}
}else{
http_response_code(404);
//echo "错误：文件不存在。";
exit;
}
}else{
http_response_code(405);
exit;
}
}
4.前端详情页模板使用
{foreach $rjfile as $v}
<li>
{$v['id']}
{$v['title']}
{$v['filetype']}
{$v['size']}
{fun date('Y-m-d',$v['addtime'])}
<a href="javascript:;" class="downf" fid="{$v['id']}" fname="{$v['title']}">下载</a>
</li>
{/foreach}
5.结合js实现文件下载
<script type="text/javascript">
function download(id,filename){
$('body').append(`<form method="post" target="_blank" action="/common/download.html" id="downloadForm"><input type="hidden" name="fid" value="${id}" required><input type="hidden" name="file_name" value="${filename}" required></form>`);
setTimeout(function(){
$("#downloadForm").submit();
setTimeout(function(){
$("#downloadForm").remove()
},1000)
},500)
}
$(function(){
$(".downf").each(function(){
$(this).click(function(){
var fid = $(this).attr("fid");
var fname = $(this).attr("fname");
download(fid,fname)
})
})
})
</script>百度ueditor组件上传图片后自定义img标签里的属性
Ueditor编辑器在上传图片后，所插入的img标签中，title、alt属性设置的值可能不是我们希望的值，同时，当鼠标移到图片上时会出现title属性值的内容或者添加自定loading属性。此时，可通过修改ueditor.all.js文件中这几个属性的赋值内容，操作如下图所示：
//1.修改过滤
var notTransAttrs = {
'href':1,
'src':1,
'_src':1,
'_href':1,
'cdata_data':1,
'class':1,
'loading':1
};//2.修改回调
function callback(){
try{
var link, json, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent || '';
json = (new Function("return " + result))();
link = me.options.imageUrlPrefix + json.url;
if(json.state == 'SUCCESS' && json.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('loading', 'lazy');
// loader.setAttribute('title', json.title || '');
loader.setAttribute('title', '');
loader.setAttribute('alt', json.original || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
} else {
showErrorLoader && showErrorLoader(json.state);
}
}catch(er){
showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
}
form.reset();
domUtils.un(iframe, 'load', callback);
}