手腕舟状骨骨折手术后第一篇文章-HTML5 blob实现JS,CSS,HTML当页预览

15082次浏览

前言

今天教师节,祝老师们节日快乐。这篇文章是我手术之后的第一篇文章,全篇文章用左手打字,望大家原谅!

手术

去年打篮球摔倒,一直以为没有问题,也一直没有去医院检查。但是半年过去了,手腕部一直疼痛,医院拍片之后,说是手腕舟状骨骨折,这个骨折相当麻烦。由于是陈旧骨折,需要做手术才能完全康复!9月4号,周一入住华山医院,9月6号周三做手术。 简单说一下我手术的体验。 由于我是整个手臂的麻醉,打完麻药,我感觉我的手臂不是我自己的了。整个手术耗时三个多小时,在此我要感谢 虞聪和 陈琳两位教授精湛的手法。手术过程中我是有意识的,只听到两位教授在不停的讨论,只是感觉他们在撬动我的骨头。就像用锤子在击打。 整个过程虽然没有疼痛,但是一直在煎熬。

在此,忠告大家,好好保重身体,摔打及时检查!

HTML5 blob实现JS,CSS,HTML直接当前页预览

术后闲看,看到张鑫旭大神写的iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览,之前还真没这么用过,简单测试了一下,还蛮好用。

例如下面代码:

    div.haorooms {
      position: absolute; top: 50px; left: 50px;
      -webkit-animation: clockwise 2.5s linear infinite; animation: clockwise 2.5s linear  infinite ;
      transform-origin: 70px 70px;
    }

.haorooms   em {
        display: block;
        width: 40px; height: 40px;
        background: red;
          color:000;
        -webkit-animation: counter-clockwise 2.5s linear infinite; animation: counter-clockwise 2.5s linear  infinite ;
    }

    @-webkit-keyframes clockwise{
      0%  { -webkit-transform: rotate(0deg) ;  }
      100%{ -webkit-transform: rotate(360deg); }
    }

    @keyframes clockwise {
      0%  { transform: rotate(0deg) ; }
      100%{ transform: rotate(360deg); }
    }

    @-webkit-keyframes counter-clockwise {
      0%  { -webkit-transform: rotate(360deg) ;  }
      100%{ -webkit-transform: rotate(0deg); }
    }

    @keyframes counter-clockwise {
      0%  { transform: rotate(360deg) ;  }
      100%{ transform: rotate(0deg); }
    }
案例效果预览

核心原理:

1、创建iframe元素;

2、将CSS,HTML字符串转换为Blob对象;

3、使用URL.createObjectURL()方法将Blob对象转换为URL对象并赋予我们创建的iframe元素的src属性;

核心js如下:

// 1. 创建iframe元素
var iframe = document.createElement('iframe');
// 2. 将CSS,HTML字符串转换为Blob对象
var blob = new Blob([htmlCode], {
  'type': 'text/html'
});
// 3. 使用URL.createObjectURL()方法将...
iframe.src = URL.createObjectURL(blob);

Tags: 随感HTML5 blob

相关文章:

  1. jamesgaochao
    1
    你好!我看到你在网上写的关于手腕舟状骨骨折手术的文章,恰好我也是舟状骨陈旧性骨折,在考虑是否要动手术,麻烦问一下,能否加你的微信沟通。我的微信号jamesgaochao。谢谢