浏览模式: 普通 | 列表
分类: H5/JS/CSS | < | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | > | >>

JavaScript的一个checkbox全选功能方法

[ 2021-11-03 15:21:03 | 作者: admin ]
<input type="checkbox" onclick="selectAll(this)" />全选

<script>
                function selectAll(selectAllBtn){
                     var arr=document.getElementsByName("choice");
                     for(var i=0;i<arr.length;i++){
                     arr[i].checked=selectAllBtn.checked;//循环遍历看是否全选
                     }
                }
</script>
         <div class="dowebok">
                <ul>
                     <li><a href="javascript:">Smoothslides – 可平移的jQuery幻灯片插件</a></li>
                     <li><a href="javascript:">jQuery全屏滚动插件fullPage.js</a></li>
                     <li><a href="javascript:">WOW.js – 让页面滚动更有趣</a></li>
                     <li><a href="javascript:">让IE7 IE8支持CSS3 background-size属性</a></li>
                     <li><a href="javascript:">shCircleLoader – jQuery Loading效果插件</a></li>
...

阅读全文…
西瓜播放器
https://v2.h5player.bytedance.com/generate/

关于播放器尺寸,好像不能设置百分比
        配置项:width, height
        默认值:600, 337.5


设置为流式布局,可使播放器宽度跟随父元素的宽度大小变化,且高度按照配置项中的高度和宽度的比例来变化(播放器宽高未设置时按照内部默认值来计算)。
fluid: true


自适应视频内容宽高
fitVideoSize: 'auto'




vue阿里云播放器
https://github.com/slacrey/vue-aliplayer

CSS实现垂直居中的常用方法

[ 2021-06-18 11:20:32 | 作者: admin ]
attachments/202106/18_113218__20210618113155.png


方法一:
                html,body {
                     width: 100%;
                     height: 100%;
                     margin: 0;
                     padding: 0;
                }
                .box{
                     width: 300px;
                     height: 300px;
                     background: orange;
                     margin: 0 auto; /*水平居中*/
                     position: relative;
                     top: 50%; /*头部向下偏移50%*/
...

阅读全文…

ueditor使用代码高亮的方法

[ 2021-03-18 10:09:08 | 作者: admin ]
最近发现ueditor支持代码高亮,但是页面上并没有起效果,于是网上找了下,发现还需做如下修改:

1、页面引用以下资源文件(均位于ueditor目录中):
<script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">


2、增加如下js脚本使高亮生效:
SyntaxHighlighter.all();




https://www.cnblogs.com/qf19910623/p/5630763.html
p.s. device的cdn服务器地址 https://www.bootcdn.cn/device.js/
根据设备的不同生成的CSS...

阅读全文…
p.s.只是简单的字符串处理,本质还是明文,没有特殊加密效果

PHP加密:
如果只是普通字符,则简单 base64_encode() 转为base64串即可,但是如果字符串中包含emoji等特殊字符,php解密没有问题,但是放js中没有办法直接解密,需要先将字符串urlencode()处理,然后再base64加密。
还需要特别说明的是,js只支持解密utf8编码,如果字符串是gbk的,需要先转成utf8,再加密。
所以gbk字符串的加密方法为
$title = "你好,世界。";
$title = mb_convert_encoding($title, 'UTF-8','gbk'); //先转编码gbk->utf8
$title = urlencode( $title ) ; //处理emoji等特殊字符,如果没有特殊字符这一步省略
...

阅读全文…

js jquery base64 加密解密

[ 2021-01-20 13:38:56 | 作者: admin ]
p.s. 由于js中使用的加密解密一般都是只支持utf8编码,所以对gbk编码字符串进行加解密需要先转为 utf8。


引入 jquery.base64.js
<script src="js/jquery.base64.js" type="text/javascript"></script>

使用时还需注意,先引入 jquery
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>

用法如下
//对123456进行加密
var str = $.base64.encode('123456');
alert(str);
//对 str 进行解密
var dstr = $.base64.decode(str);
alert(dstr)



jquery.base64.js ...

阅读全文…