Featured

音乐播放器

导引养生功12法


八段锦

街舞音乐

iframe父子间传值通信

父页面调用子页面方法:FrameName.window.childMethod();
子页面调用父页面方法:parent.window.parentMethod();

例子:

父页面

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("parent.html");
        }
        function callChild(){
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value="调用结束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
    <iframe name="myFrame" src="child.html"></iframe>
</body>
</html>

子页面

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("child.html");
        }
        function callParent(){
            parent.say();
            parent.window.document.getElementById("button").value="调用结束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
</body>
</html>

跨域 iframe 父子间传值

父页面:

<template>
    <div>
        <iframe 
         :src="iframesrc" 
         id="a-page"></iframe>
    </div>
</template>

<script>
export default {
    computed:{
        iframesrc:function(){
            let iframesrc = "http://b.com"
            return iframesrc
        }
    },
    created () {
        // 得到B传来的值 
        window.addEventListener('message',function(e){
            console.log("B DOM的高度", e.data)
        },false);
        // 监听A页面的事件,发送给B
        window.addEventListener('scroll', function () {
            let iframe = document.getElementById('a-page');

            let json = {
                scrollTop: scrollTop,
                windowHeight: windowHeight,
            };
            iframe.contentWindow.postMessage(json, '*');
        });
    }
}
</script>

子页面

<template>
    <div>
        <div id="b-page"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        // 获取到B页面的值,发送给A
        let _this = this
        let b_pageH = document.getElementById('b-page').scrollHeight;
        window.parent.postMessage(b_pageH, '*');
        // 得到A页面的值
        window.addEventListener('message',function(e){
            console.log("e.data.scrollTop", e.data.scrollTop)
            console.log("e.data.windowHeight", e.data.windowHeight) 
        },false);
    }
}
</script>

结合canvas动画背景的基础布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合canvas动画背景的基础布局</title>
    <style>    
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:530px}    
.div-a{ position:absolute; left:30px; top:30px; background:#F00; width:400px; height:100px;z-index:10;}    
/* css注释说明: 背景为红色 */    
.div-b{ position:absolute; left:30px; top:130px; background:#FF0; width:400px; height:200px;z-index:20;}    
/* 背景为黄色 */    
.div-c{ position:absolute; left:30px; top:330px; background:#00F; width:400px; height:100px;z-index:30;}    
/* DIV背景颜色为蓝色 */   

.flexContainer {
  display: flex;
  background-color: gray;
  width: 300px;
  height: 100px;
}
.flexItem {
  width: 80px;
  height: 80px;
}
</style> 
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>

<div class="div-relative">   
<canvas id="myCanvas" width="500" height="530" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<div class="div-a">我背景为红色</div>    
<div class="div-b" id="div1">
    <iframe src="https://cfzy.site" width="400"></iframe>
  <p>您的浏览器不支持 iframes 。</p>
</iframe>
    </div>    
<div class="div-c">
    <div class="flexContainer">
    <div class="flexItem" style="background-color: red" id="b1">a</div>
    <div class="flexItem" style="background-color: blue" id="b2">b</div>
    <div class="flexItem" style="background-color: green" id="b3">c</div>
   </div>
</div>    
</div> 
<script>

(document).ready(function(){("#b1").click(function(){
   alert("段落被点击了。");
$("iframe").attr("src","https://cfzy.site/?p=2555");
  });
});

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#00fff0";
ctx.fillRect(0,0,500,530);


</script>
</body>
</html>

div&canvas重叠

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div&canvas重叠</title>
    <style>    
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px}    
.div-a{ position:absolute; left:30px; top:30px; background:#F00; width:400px; height:100px;z-index:30;}    
/* css注释说明: 背景为红色 */    
.div-b{ position:absolute; left:30px; top:40px; background:#FF0; width:400px; height:200px;z-index:20;}    
/* 背景为黄色 */    
.div-c{ position:absolute; left:30px; top:50px; background:#00F; width:400px; height:100px;z-index:10;}    
/* DIV背景颜色为蓝色 */    
</style> 
</head>
<body>



<div class="div-relative">   

    <canvas id="myCanvas" width="500" height="400" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<div class="div-a">我背景为红色</div>    
<div class="div-b"></div>    
<div class="div-c"></div>    


</div> 

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#00fff0";
ctx.fillRect(0,0,500,400);

</script>

</body>
</html>

Docker备份和迁移

备份与迁移

容器保存为镜像
我们可以通过以下命令将容器保存为镜像

docker commit pyg_nginx mynginx
pyg_nginx是容器名称

mynginx是新的镜像名称

此镜像的内容就是你当前容器的内容,接下来你可以用此镜像再次运行新的容器

镜像备份

docker save -o mynginx.tar mynginx
-o 输出到的文件

执行后,运行ls命令即可看到打成的tar包

镜像恢复与迁移
首先我们先删除掉mynginx镜像

然后执行此命令进行恢复

docker load -i mynginx.tar
-i 输入的文件

执行后再次查看镜像,可以看到镜像已经恢复
利用镜像,以端口映射的方式创建容器,这里80端口映射到本机80,3306同理
docker run -i -t -p 80:80 -p 3306:3306 myimages /bin/bash
因为镜像已经安装xampp,我们直接启动xampp

开搞达梦数据库

如何查看达梦数据库各个表的大小
1、创建一个表来存各表的大小
create table table_count (owner varchar(100),table_name varchar(100),used_space_MB varchar(100));

2、执行语句块,查出各表的大小,存进table_count这个表里。

declare
begin
for rec in
(
select owner, table_name from all_tables order by 1, 2
)
loop
insert into table_count
select
rec.owner ,
rec.table_name,
table_used_pages(rec.owner, rec.table_name)*(page()/1024)/1024
from
dual;
end loop;
end;

3、查询表table_count的信息,根据需求排序,就能看到各表的大小
select * from table_count order by used_space_mb desc;

animatecc videoplayer

!!!临时测试可以,但最好不要在时间线上code,否则bug不可控!!!
animatecc videoplayer

//创建一个NetConnection对象,用于创建视频连接
var nc:NetConnection = new NetConnection();
//创建一个NetStream对象,用于控制视频的加载和播放
var ns:NetStream;
//创建一个Video对象,用于显示视频内容
var vid:Video = new Video();
//创建两个Object对象,以获取和储存视频的元数据信息
var movieObj:Object;
var customClient:Object;
//储存视频播放器的播放状态
var playStatus:String="play";


function metaDataHandler(metaDataObject:Object) {
    //将回调的视频元数据赋予movieObj对象
    movieObj=metaDataObject;
}


function playVideo() {


    //创建NetConnection对象连接。由于此时视频文件位于本地计算机上,因此参数为null
    nc.connect(null);
    //通过nc连接创建NetStream对象实例
    ns = new NetStream(nc);
    //设置ns对象的client属性为customClient对象,以便当获得元数据时,触发onMetaData( )事件回调处理函数metaDataHandler
    customClient= {onMetaData:metaDataHandler};
    ns.client = customClient;
    //使用play方法下载并播放视频
    ns.play("wdata.mp4");
    //使用Video对象的attachNetStream方法,将NetStream中的视频数据显示在vid容器中
    vid.attachNetStream(ns);

    vid.width = 3832;
    vid.height = 888;
    vid.smoothing = true;
    waipic.addChild(vid);

    addEventListener(Event.ENTER_FRAME,showPlayProgress);
}

function showPlayProgress(event:Event) {
    //通过目前播放点的时间值除以总时长,得到当前的播放进度
    var curtime:Number = ns.time;
    var totaltime:Number = movieObj.duration;

    //当播放进度大于99.99%时,表示播放到了视频尾部,此时重新播放视频
    if (curtime/totaltime>=0.9999) {
        ns.close();
        playVideo();
    }
}

function init() {

    movieObj= new Object();

    playVideo();
}
init();

网旋风animate动画广告创意直播书摘

中国古语:温故知新,学无止境
网旋风AnimateCC是动画广告创作利器,adobe公司在动画影视方面的软件真的是一骑绝尘,甩其他同类型的软件好多条街了。
书摘如下:
1. 画正圆的小技巧,按住shift;画正椭圆就按住alt
2. 刷子工具绘图填充模式:
– 标准绘画:一笔刷下去盖住填充色和线条色
– 颜料填充:一笔刷下去盖住填充色,线条不受影响
– 后面绘画:一笔刷下去不影响填充和线条,只影响空白区
– 内部绘画:如果一笔刷下去的起点在空白区,效果同“后面绘画”;如果一笔刷下去的起点在填充区,则盖住填充色,线条和空白区不受影响
– 颜料选择:一笔刷下去只影响选定区域内的填充色和线条色