无法摆脱document.write（）

时间：2015-08-23 04:14:11

标签： javascript css-position document.write

如果找不到父节点的任何引用，如何放置/定位/附加js文件？例如，有人想在他们的网页上使用我的脚本，并希望它位于div或表等中，没有id，name或classname。父节点只返回null。

我唯一的解决方案就是不断回到可信赖的旧的但据称是邪恶的document.write（）。我已经读过document.write（）的危险但是对于这种脚本我从来没有遇到过问题

下面是一个例子，我对旧的BBC模拟时钟的看法。我正在努力跟上时间，其中大部分使用createElement并附加，但是包装器/容器是通过document.write（）创建的。

就目前而言，你可以把它粘在你想要的任何地方，就我测试而言，没有任何问题。有什么想法吗？

(function () {

/* The BBC Analogue Clock - kurt.grigg@yahoo.co.uk */

/* ^^^^^^^^^^^^^^^^^^^ Config below ^^^^^^^^^^^^^^^^^^^ */

var clockSize = 300;
var dialcol = 'rgba(0,0,255,1.0)';
var handcol = 'rgb(230,230,230)';

/* ^^^^^^^^^^^^^^^^^^^ End config ^^^^^^^^^^^^^^^^^^^ */

var d = document;
var mrkrs = [];
var e = (360 / 12);
var degr = 0;
var mls = 100;
var prev = performance.now();
var radi = Math.PI / 180;
var offs = 60 * radi;
var rndId = 'id'+Math.random() * 1;
var sSpan = '.9s';
var mSpan = '1s';
var hSpan = '1s';
var sIncr = 0;
var mIncr = 0;
var hIncr = 0;
var sDeg, mDeg, hDeg, sPre, mPre, hPre;
var idx = d.getElementsByTagName('div').length;
d.write('<div id = "'+rndId+'" style="display:inline-block;line-height:0px;"></div>');

function xy(a) {
    return (a * clockSize / 100);
}

var dial = d.createElement('div');
dial.setAttribute('style', 'display: inline-block;'
    +'position: relative;'
    +'height: '+clockSize+'px;'
    +'width: '+clockSize+'px;'
    +'margin: 0px;padding: 0px;'
    +'border-radius: 5%;z-index: 1;'
    +'background-color: '+dialcol+';');
d.getElementById(rndId).appendChild(dial);

for (var i = 0; i < 12; i++) {

    var incr = xy(2.0) + (i * xy(0.2));

    mrkrs[i] = d.createElement('div');
    mrkrs[i].setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'width: '+xy(14)+'px;'
        +'height: '+xy(14)+'px;'
        +'margin: auto; top: 0;bottom: 0;left: 0;right: 0;'
        +'font-size: 0px;line-height: 0px;padding: 0;'
        +'text-align: center !important;'
        +'background-color: transparent;');

    mrkrs[i].innerHTML = '<div style = "display: inline-block;'
    +'position: relative;width: '+incr+'px;height: '+xy(14)+'px;'
    +'font-size: 0px;background-color:'+handcol+';'
    +'margin-right: '+xy(0.6)+'px;"></div>'
    +'<div style = "display:inline-block;position: relative;'
    +'width: '+incr+'px;height: '+xy(14)+'px;font-size: 0px;'
    +'margin-left: '+xy(0.6)+'px;'
    +'background-color:'+handcol+';"></div>';

    dial.appendChild(mrkrs[i]);
    degr += 30;

    mrkrs[i].style.top = xy(0) + xy(77) * 
        Math.sin(-offs + e * i * radi) + 'px';
    mrkrs[i].style.left= xy(0) + xy(77) * 
        Math.cos(-offs + e * i * radi) + 'px';
    mrkrs[i].style.transform = 'rotate(' + (degr) + 'deg)';
    mrkrs[i].style.transformOrigin = 'center center';
}

/* Hour CSS */

var hCss = 'display: block;'
    +'position: absolute;'
    +'height: '+xy(56)+'px;'
    +'width: '+xy(6)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0;bottom: 0; left: 0; right: 0;'
    +'transform-origin: center center 0;'
    +'z-index: 2;';
var hClone = hCss;

var houHand = d.createElement('div');
houHand.setAttribute('style', hClone);
dial.appendChild(houHand);

var hh = d.createElement('div');
hh.setAttribute('style', 'display: block;'
    +'position: absolute;'
    +'height: '+xy(21)+'px;'
    +'width: '+xy(6)+'px;' 
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0; left: 0; right: 0;'
    +'background-color: '+handcol+';');
houHand.appendChild(hh);

/* Minute CSS */

var mCss = 'display: block;'
    +'position: absolute;'
    +'height: '+xy(86)+'px;'
    +'width: '+xy(4)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0; bottom: 0; left: 0; right: 0;'
    +'transform-origin: center center;'
    +'z-index: 3;';
var mClone = mCss;

var minHand = d.createElement('div');
minHand.setAttribute('style', mClone);
dial.appendChild(minHand);

var mh = d.createElement('div');
mh.setAttribute('style', 'display: block;'
    +'position: absolute;'
    +'height: '+xy(36)+'px;'
    +'width: '+xy(4)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0; left: 0; right: 0;'
    +'background-color: '+handcol+';');
minHand.appendChild(mh);

/* Second CSS */

var sCss = 'display: block;'
    +'position: absolute;'
    +'height: '+xy(90)+'px;'
    +'width: '+xy(2)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0;bottom: 0; left: 0; right: 0;'
    +'transform-origin: center center;'
    +'z-index: 4;';
var sClone = sCss;

var secHand = d.createElement('div');
secHand.setAttribute('style', sClone);
dial.appendChild(secHand);

var sh = d.createElement('div');
sh.setAttribute('style', 'display: block;'
    +'position: absolute;'
    +'height: '+xy(39)+'px;'
    +'width: '+xy(2)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0; left: 0; right: 0;'
    +'background-color: '+handcol+';');
secHand.appendChild(sh);

var sectail = d.createElement('div');
sectail.setAttribute('style', 'display: block;'
    +'position: absolute;'
    +'height: '+xy(12)+'px;'
    +'width: '+xy(2)+'px;'
    +'margin: auto; left: 0; right: 0;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'top: '+xy(52)+'px;'
    +'background-color: '+handcol+';');
secHand.appendChild(sectail);

/* Centre nut & optional glass front CSS */

var nut = d.createElement('div');
nut.setAttribute('style', 'display: inline-block;'
    +'position: absolute;'
    +'height: '+xy(10)+'px;'
    +'width: '+xy(10)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'border: '+xy(3)+'px solid '+handcol+';'
    +'border-radius: 50%;'
    +'margin: auto;top: 0;bottom: 0;left: 0;right: 0;'
    +'background-color: transparent;'
    +'z-index: 5;');
dial.appendChild(nut);

var glass = d.createElement('div');
glass.setAttribute('style', 'display: block;'
    +'height:'+clockSize+'px;'
    +'width: '+clockSize+'px;'
    +'border-radius:'+xy(5)+'px;'
    +'margin: auto;top: 0;bottom: 0;left: 0;right: 0;'
    +'z-index: 6;box-shadow:'
    +'0 '+xy(1)+'px '+xy(1)+'px rgba(0,0,0,0.5),'
    +'inset 0 '+xy(1)+'px rgba(255,255,255,0.3),'
    +'inset 0 '+xy(10)+'px rgba(255,255,255,0.2),'
    +'inset 0 '+xy(10)+'px '+xy(20)+'px rgba(255,255,255,0.25),'
    +'inset 0 -'+xy(15)+'px '+xy(30)+'px rgba(0,0,0,0.3);');
dial.appendChild(glass);

var eiatf = 'translateZ(0); animation-timing-function: ease-in';
var eoatf = 'translateZ(0); animation-timing-function: ease-out';

function secKeyFrames() {
    var secSheet = (d.getElementById('tmpSecSheet'+idx));
    if (secSheet) {
        secSheet.outerHTML = '';
    }
    
    sClone = sCss;
 
    var p1 = sDeg;
    var p2 = sDeg+6;
    var p3 = sDeg+4;
    var p4 = sDeg+6;
    var p5 = sDeg+5; 
    var p6 = sDeg+6; 

    var secframes = '@keyframes reGen'+sIncr+' { '
    +'0% { transform: rotate('+p1+'deg) '+eiatf+';}'
    +'30% { transform: rotate('+p2+'deg) '+eoatf+';}'
    +'45% { transform: rotate('+p3+'deg) '+eiatf+';}'
    +'60% { transform: rotate('+p4+'deg) '+eoatf+';}' 
    +'70% { transform: rotate('+p5+'deg) '+eiatf+';}'
    +'80%,100% { transform: rotate('+p6+'deg) '+eoatf+';}}';

    var ss = document.createElement( 'style' );
    ss.setAttribute('id', 'tmpSecSheet'+idx);
    ss.innerHTML = secframes;
    document.getElementsByTagName('head')[0].appendChild(ss);

    var secAni = 'animation: reGen'+sIncr+' '+sSpan+' 1 forwards;';
    sClone += secAni;
    secHand.setAttribute('style', sClone);
    dial.appendChild(secHand);
}

function minKeyFrames() {
    var minSheet = (d.getElementById('tmpMinSheet'+idx));
    if (minSheet) {
        minSheet.outerHTML = '';
    }

    mClone = mCss;
 
    var p1 = mDeg;
    var p2 = mDeg+6;
    var p3 = mDeg+4;
    var p4 = mDeg+6;
    var p5 = mDeg+5; 
    var p6 = mDeg+6;

    var minframes = '@keyframes minGen'+mIncr+' { '
    +'0% { transform: rotate('+p1+'deg) '+eiatf+';}'
    +'30% { transform: rotate('+p2+'deg) '+eoatf+';}'
    +'45% { transform: rotate('+p3+'deg) '+eiatf+';}'
    +'60% { transform: rotate('+p4+'deg) '+eoatf+';}' 
    +'70% { transform: rotate('+p5+'deg) '+eiatf+';}'
    +'80%,100% { transform: rotate('+p6+'deg) '+eoatf+';}}';

    var ms = document.createElement( 'style' );
    ms.setAttribute('id', 'tmpMinSheet'+idx);
    ms.innerHTML = minframes;
    d.getElementsByTagName('head')[0].appendChild(ms);

    var minAni = 'animation: minGen'+mIncr+' '+mSpan+' 1 forwards;';
    mClone += minAni;
    minHand.setAttribute('style', mClone);
    dial.appendChild(minHand);
}

function houKeyFrames() {
    var houSheet = (d.getElementById('tmphouSheet'+idx));
    if (houSheet) {
        houSheet.outerHTML = '';
    }

    hClone = hCss;
 
    var p1 = hDeg;
    var p2 = hDeg+1;
    var p3 = hDeg+0.4;
    var p4 = hDeg+1;
    var p5 = hDeg+0.5; 
    var p6 = hDeg+1; 

    var houframes = '@keyframes houGen'+hIncr+' { '
    +'0% { transform: rotate('+p1+'deg) '+eiatf+';}'
    +'30% { transform: rotate('+p2+'deg) '+eoatf+';}'
    +'45% { transform: rotate('+p3+'deg) '+eiatf+';}'
    +'60% { transform: rotate('+p4+'deg) '+eoatf+';}' 
    +'70% { transform: rotate('+p5+'deg) '+eiatf+';}'
    +'80%,100% { transform: rotate('+p6+'deg) '+eoatf+';}}';

    var hs = document.createElement( 'style' );
    hs.setAttribute('id', 'tmphouSheet'+idx);
    hs.innerHTML = houframes;
    d.getElementsByTagName('head')[0].appendChild(hs);

    var houAni = 'animation: houGen'+hIncr+' '+hSpan+' 1 forwards;';
    hClone += houAni;
    houHand.setAttribute('style', hClone);
    dial.appendChild(houHand);
}

function animate() {
    var x = new Date();
    var seconds = x.getSeconds();
    var minutes = x.getMinutes();
    var hours = (x.getHours() * 30) + (x.getMinutes() / 2);
    
    if (seconds !== sPre) {
        sIncr++;
        sDeg = (seconds-1) * 6;
        secHand.removeAttribute('style');
        secKeyFrames();
        if (sIncr > 59) {
            sIncr = 0;
        }
    }

    if (minutes !== mPre) {
        mIncr++;
        mDeg = (minutes-1) * 6;
        minHand.removeAttribute('style');
        minKeyFrames();
        if (mIncr > 59) {
            mIncr = 0;
        }
    }

    if (hours !== hPre) {
        hIncr++;
        hDeg = (hours-1) * 1;
        houHand.removeAttribute('style');
        houKeyFrames();
        if (hIncr > 59) {
            hIncr = 0;
        }    
    }

    sPre = seconds;
    mPre = minutes;
    hPre = hours;
}

function cyc() {
    var pres = performance.now(); 
    if ((pres - prev) > mls) {
        animate();
        prev = performance.now();
    }
    window.requestAnimationFrame(cyc);
} 

window.addEventListener('load', cyc, false);
})();

3 个答案:

答案 0 :(得分：0)

使用document.write()的一种可能替代方法是获取脚本标记引用。

而不是d.write('<div id = "'+rndId+'" style="display:inline-block;line-height:0px;"></div>');

您可以使用

var scriptDom = document.currentScript;
var container = scriptDom.parentNode;
var containerDiv = document.createElement('div');
containerDiv.id = rndId;
containerDiv.style.display = 'inline-block';
containerDiv.style['line-height'] = '0px';
container.appendChild(containerDiv);

请参阅here for more information on referencing the script tag.

如果父节点即使在这种情况下也为空，document.write()可能是您最好的选择。

*请注意，脚本标记必须存在于HTML正文中，因为附加到头部的元素往往不会呈现。

答案 1 :(得分：0)

一个可能的解决方案是将整个脚本包装为必须直接调用的函数，如下所示：

function drawClock(divID) {

   // some of your code goes here

   var el = document.getElementById(divID);
   if (el) {
       // write your code to the divID
   } else {
      // use your document.write() call as before
   }

   // rest of your code goes here
}

这种方法有两个主要好处：

  1. 您的用户现在可以使用＆lt; script src =“yourScript.js”＆gt;＆lt; / SCRIPT＆gt;来包含您的脚本。而不是直接将代码段嵌入到他们想要在代码中呈现它的位置，这样可以使最终用户更清洁。
  2. 您为用户提供了一个非常明显的界面，因此他们知道需要divID。但是，作为你的后备，如果他们没有传入divID，你仍然可以使用document.write（）

    3. 作为最终用户，我的代码类似于：

    <!-- any amount of HTML goes here -->
<SCRIPT src="yourClockScript.js"></SCRIPT>
<!-- any amount of HTML goes here -->
<DIV id="clockLocation"></DIV>
<!-- any amount of HTML goes here -->
<SCRIPT>
  drawClock('clockLocation');
</SCRIPT>

    就个人而言，我会通过使时钟成为可配置的对象来进一步发展。但是，这是一个超出您问题范围的不同讨论。

答案 2 :(得分：0)

原件：

(function () {

 /* Analogue Clock - kurt.grigg@yahoo.co.uk */

 /* ^^^^^^^^^^^^ Config below ^^^^^^^^^^^^^ */

var clockSize = 300;
var casecol = 'rgba(255,255,255,1.0)';
var dialcol = 'rgba(255,255,255,1.0)';
var numcol = 'rgba(1,1,1,1.0)';
var seccol = 'rgba(240,0,0,1.0)';
var handcol = 'rgba(60,60,60,1.0)';
var nutcol = 'rgb(220,0,0)';
var clockShape = 50;
/* (max) 50 = round  (min) 0 = square */

/* Optional dial background image */

var dialimg = 'url("")';

/* Dial background options:

'url("")'; 
    [Blank. Defaults to dialcol]
  
'url("abg.jpg")';
    [Image applied. Overides dialcol]
  
'linear-gradient(to right, rgba(0,0,255,1.0) 0%, rgba(255,0,0,1.0) 100%);';
    [Gradient applied. Overides dialcol]

*/       

var numoutline = 'yes';
    /* 'yes' or 'no' */
var numfill = 'rgba(240,0,0,1.0)';
var numshad = 'rgba(0,0,0,0.1)';

/* ^^^^^^^^^^^^^^^^^^^ End config ^^^^^^^^^^^^^^^^^^^ */

var d = document;
var dgts = [];
var e = 360/12;
var degr = 0;
var nums = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
var mls = 100;
var prev = performance.now();
var radi = Math.PI / 180;
var offs = 60 * radi;
var canstroke = ('webkitTextStroke' in d.body.style);
var str = '-webkit-text-fill-color: '+numfill+';'
    +'-webkit-text-stroke-width: '+xy(0.3)+'px;'
    +'-webkit-text-stroke-color: '+numcol+';';
var wks = (canstroke && numoutline == "yes")?str:'';
var broff = (clockShape < 20)?2:0;
var secSpan = '.9s';
var minSpan = '1.5s';
var houSpan = '1.5s';
var secIncr = 0;
var minIncr = 0;
var houIncr = 0;
var secDeg, minDeg, houDeg, preSec, preMin, preHou;
var idx = d.getElementsByTagName('div').length;
var rndId = 'id'+Math.random() * 1;
d.write('<div id = "'+rndId+'" style="display:inline-block;line-height:0px;"></div>');

function xy (a) {
    return (a * clockSize / 100);
}

var dial = d.createElement('div');
dial.setAttribute('style', 'display:inline-block;'
    +'position: relative;'
    +'height: '+clockSize+'px;'
    +'width: '+clockSize+'px;'
    +'background-image: '+dialimg+';' 
    +'background-size: cover;'
    +'background-color: '+dialcol+';'
    +'border: '+xy(2)+'px solid '+casecol+';'
    +'border-radius: '+clockShape+'%;');
d.getElementById(rndId).appendChild(dial);

for (var i = 0; i < 12; i++) {
    dgts[i] = d.createElement('div');
    dgts[i].setAttribute('style', 'display: block;'
        +'position: absolute;'
        +'width: '+xy(16)+'px;'
        +'height: '+xy(14)+'px;'
        +'margin: auto;top: 0;bottom: 0; left: 0;right: 0;'
        +'font: bold '+xy(13)+'px  Arial;'
        +'line-height: '+xy(13)+'px;'
        +'text-align: center !important;'
        +'color: '+numcol+';'
        +'text-shadow: '+xy(1)+'px '+xy(1)+'px 0px '+numshad+';'+wks+';');

    dgts[i].innerHTML = nums[i];
    dial.appendChild(dgts[i]);
    degr += 30;
    dgts[i].style.top = xy(0) + xy(84) * Math.sin(-offs + e * i * radi) + 'px';
    dgts[i].style.left= xy(0) + xy(84) * Math.cos(-offs + e * i * radi) + 'px';
    dgts[i].style.transform = 'rotate(' + (degr) + 'deg)';
    dgts[i].style.transformOrigin = 'center center 0px';
}

/* Hour hand CSS */

var houCss = 'display: block;'
    +'position: absolute;'
    +'height: '+xy(73)+'px;'
    +'width: '+xy(5)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0;bottom: 0; left: 0; right: 0;'
    +'transform-origin: center center 0;'
    +'z-index: 2;';
var houClone = houCss;

var houHand = d.createElement('div');
houHand.setAttribute('style', houClone);
dial.appendChild(houHand);

var hh = d.createElement('div');
hh.setAttribute('style', 'display: block;'
    +'position: absolute;'
    +'height: '+xy(39)+'px;'
    +'width: '+xy(3)+'px;'
    +'border-radius: '+xy(2.5)+'px  '+xy(2.5)+'px 0% 0%;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0;left: 0;right: 0;'
    +'box-shadow: '+xy(.5)+'px '+xy(.5)+'px 0px 0px rgba(0,0,0,0.2);'
    +'background-color: '+handcol+';');
houHand.appendChild(hh);
  
/* Minute hand CSS */

var minCss = 'display: block;'
    +'position: absolute;'
    +'height: '+xy(95)+'px;'
    +'width: '+xy(3)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0;bottom: 0;left: 0;right: 0;'
    +'transform-origin: center center;'
    +'z-index: 3;';
var minClone = minCss;

var minHand = d.createElement('div');
minHand.setAttribute('style', minClone);
dial.appendChild(minHand);

var mh = d.createElement('div');
mh.setAttribute('style', 'display:block;'
    +'position: absolute;'
    +'height: '+xy(50)+'px;'
    +'width: '+xy(2)+'px;'
    +'border-radius: '+xy(1.5)+'px '+xy(1.5)+'px 0% 0%;'
    +'margin: auto; top: 0; left: 0;right: 0;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'box-shadow: '+xy(0.8)+'px '+xy(0.8)+'px 0px 0px rgba(0,0,0,0.2);'
    +'background-color: '+handcol+';');
minHand.appendChild(mh);

/* Seconds hand CSS */

var secCss = 'display: block;'
    +'position: absolute;'
    +'height: '+xy(95)+'px;'
    +'width: '+xy(8)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0;bottom: 0; left: 0; right: 0;'
    +'transform-origin: center center;'
    +'z-index: 4;';
var secClone = secCss;

var secHand = d.createElement('div');
secHand.setAttribute('style', secClone);
dial.appendChild(secHand);

var sh = d.createElement('div');
sh.setAttribute('style', 'display: block;'
    +'position: absolute;'
    +'height: '+xy(56)+'px;'
    +'width: '+xy(1)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; top: 0; left: 0; right: 0;'
    +'box-shadow:'
    +' '+xy(1)+'px 0px 0px 0px rgba(0,0,0,0.2);'
    +'background-color: '+seccol+';');
   secHand.appendChild(sh);

var st = d.createElement('div');
st.setAttribute('style', 'display: block;'
    +'position:  absolute;'
    +'top: '+xy(55.5)+'px;'
    +'height: '+xy(6)+'px;'
    +'width: '+xy(6)+'px;'
    +'border: '+xy(2/2)+'px solid '+seccol+';'
    +'border-radius: '+xy(6)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto; left: 0; right: 0;'
    +'box-shadow:'
    +' '+xy(.8)+'px '+xy(.8)+'px 0px 0px rgba(0,0,0,0.2),'
    +'inset '+xy(.8)+'px '+xy(.8)+'px 0px 0px rgba(0,0,0,0.2);');
secHand.appendChild(st);

var nutbase = d.createElement('div');
nutbase.setAttribute('style', 'display: block;'
    +'position: absolute;'
    +'height: '+xy(3)+'px;'
    +'width: '+xy(3)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto;top: 0;bottom: 0;left: 0;right: 0;'
    +'background-color: '+nutcol+';'
    +'border-radius: 50%;'
    +'z-index: 5;');
dial.appendChild(nutbase);

var nut = d.createElement('div');
nut.setAttribute('style', 'display: block;'
    +'position: absolute;'
    +'height: '+xy(1)+'px;'
    +'width: '+xy(1)+'px;'
    +'border-radius: 50%;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'margin: auto;top: 0;bottom: 0;left: 0;right: 0;'
    +'background: '+nutcol+';'
    +'box-shadow:'
    +'0px -'+xy(.2)+'px 0px rgba(225,225,225,0.7),'
    +'inset 0px -'+xy(.3)+'px 0px rgba(0,0,0,0.2),'
    +'z-index: 6;');
dial.appendChild(nut);

var glass = d.createElement('div');
glass.setAttribute('style', 'display: block;'
    +'position: absolute;'
    +'height: '+xy(100)+'px;'
    +'width: '+xy(100)+'px;'
    +'font-size: 0px;line-height: 0px;padding: 0;'
    +'border-radius: '+(clockShape - broff)+'%;'
    +'margin: auto;top: 0;bottom: 0;left: 0;right: 0;'
    +'box-shadow:'
    +'0px 0px '+xy(2)+'px '+xy(1)+'px rgba(0,0,0,0.4),'
    +'inset 0 '+xy(2)+'px rgba(255,255,255,0.01),'
    +'inset 0 '+xy(10)+'px rgba(255,255,255,0.3),'
    +'inset 0 '+xy(10)+'px '+xy(20)+'px rgba(255,255,255,0.25),'
    +'inset 0 -'+xy(10)+'px '+xy(30)+'px rgba(30,30,30,0.3);'
    +'background:rgba(0,0,0,0.1);'
    +'z-index: 7;');
dial.appendChild(glass);

var eiatf = 'translateZ(0); animation-timing-function: ease-in';
var eoatf = 'translateZ(0); animation-timing-function: ease-out';

function secKeyFrames() {
    var secSheet = (d.getElementById('tmpSecSheet'+idx));
    if (secSheet) {
        secSheet.outerHTML = '';
    }
    
    secClone = secCss;
 
    var p1 = secDeg;
    var p2 = secDeg+6;
    var p3 = secDeg+4;
    var p4 = secDeg+6;
    var p5 = secDeg+5; 
    var p6 = secDeg+6; 

    var secframes = '@keyframes reGen'+secIncr+' { '
    +'0% { transform: rotate('+p1+'deg) '+eiatf+';}'
    +'30% { transform: rotate('+p2+'deg) '+eoatf+';}'
    +'45% { transform: rotate('+p3+'deg) '+eiatf+';}'
    +'60% { transform: rotate('+p4+'deg) '+eoatf+';}' 
    +'70% { transform: rotate('+p5+'deg) '+eiatf+';}'
    +'80%,100% { transform: rotate('+p6+'deg) '+eoatf+';}}';

    var ss = document.createElement( 'style' );
    ss.setAttribute('id', 'tmpSecSheet'+idx);
    ss.innerHTML = secframes;
    document.getElementsByTagName('head')[0].appendChild(ss);

    var secAni = 'animation: reGen'+secIncr+' '+secSpan+' 1 forwards;';
    secClone += secAni;
    secHand.setAttribute('style', secClone);
    dial.appendChild(secHand);
}

function minKeyFrames() {
    var minSheet = (d.getElementById('tmpMinSheet'+idx));
    if (minSheet) {
        minSheet.outerHTML = '';
    }

    minClone = minCss;
 
    var p1 = minDeg;
    var p2 = minDeg+6;
    var p3 = minDeg+4;
    var p4 = minDeg+6;
    var p5 = minDeg+5; 
    var p6 = minDeg+6;

    var minframes = '@keyframes minGen'+minIncr+' { '
    +'0% { transform: rotate('+p1+'deg) '+eiatf+';}'
    +'30% { transform: rotate('+p2+'deg) '+eoatf+';}'
    +'45% { transform: rotate('+p3+'deg) '+eiatf+';}'
    +'60% { transform: rotate('+p4+'deg) '+eoatf+';}' 
    +'70% { transform: rotate('+p5+'deg) '+eiatf+';}'
    +'80%,100% { transform: rotate('+p6+'deg) '+eoatf+';}}';

    var ms = document.createElement( 'style' );
    ms.setAttribute('id', 'tmpMinSheet'+idx);
    ms.innerHTML = minframes;
    d.getElementsByTagName('head')[0].appendChild(ms);

    var minAni = 'animation: minGen'+minIncr+' '+minSpan+' 1 forwards;';
    minClone += minAni;
    minHand.setAttribute('style', minClone);
    dial.appendChild(minHand);
}

function houKeyFrames() {
    var houSheet = (d.getElementById('tmphouSheet'+idx));
    if (houSheet) {
        houSheet.outerHTML = '';
    }

    houClone = houCss;
 
    var p1 = houDeg;
    var p2 = houDeg+1;
    var p3 = houDeg+0.4;
    var p4 = houDeg+1;
    var p5 = houDeg+0.5; 
    var p6 = houDeg+1; 

    var houframes = '@keyframes houGen'+houIncr+' { '
    +'0% { transform: rotate('+p1+'deg) '+eiatf+';}'
    +'30% { transform: rotate('+p2+'deg) '+eoatf+';}'
    +'45% { transform: rotate('+p3+'deg) '+eiatf+';}'
    +'60% { transform: rotate('+p4+'deg) '+eoatf+';}' 
    +'70% { transform: rotate('+p5+'deg) '+eiatf+';}'
    +'80%,100% { transform: rotate('+p6+'deg) '+eoatf+';}}';

    var hs = document.createElement( 'style' );
    hs.setAttribute('id', 'tmphouSheet'+idx);
    hs.innerHTML = houframes;
    d.getElementsByTagName('head')[0].appendChild(hs);

    var houAni = 'animation: houGen'+houIncr+' '+houSpan+' 1 forwards;';
    houClone += houAni;
    houHand.setAttribute('style', houClone);
    dial.appendChild(houHand);
}

function clock() {
    var x = new Date();
    var seconds = x.getSeconds();
    var minutes = x.getMinutes();
    var hours = (x.getHours() * 30) + (x.getMinutes() / 2);
    
    if (seconds !== preSec) {
        secIncr++;
        secDeg = (seconds-1) * 6;
        secHand.removeAttribute('style');
        secKeyFrames();
        if (secIncr > 59) {
            secIncr = 0;
        }
    }

    if (minutes !== preMin) {
        minIncr++;
        minDeg = (minutes-1) * 6;
        minHand.removeAttribute('style');
        minKeyFrames();
        if (minIncr > 59) {
            minIncr = 0;
        }
    }

    if (hours !== preHou) {
        houIncr++;
        houDeg = (hours-1) * 1;
        houHand.removeAttribute('style');
        houKeyFrames();
        if (houIncr > 59) {
            houIncr = 0;
        }    
    }

    preSec = seconds;
    preMin = minutes;
    preHou = hours;
}

function cyc() {
    var pres = performance.now(); 
    if ((pres - prev) > mls) {
        clock();
        prev = performance.now();
    }
    window.requestAnimationFrame(cyc);
} 

window.addEventListener('load', cyc, false);
})();

相关问题
最新问题