h5-dom.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. const render = function (node) {
  2. if (typeof node == 'string') { // 是一个文本节点
  3. return document.createTextNode(node);
  4. }
  5. if (node instanceof HTMLElement) {
  6. return node;
  7. }
  8. // eslint-disable-next-line
  9. return createElement(node);
  10. };
  11. /**
  12. * 根据标签及属性创建一个dom
  13. */
  14. const createElement = function ({
  15. tag,
  16. attrs,
  17. children,
  18. } = {}) {
  19. const $el = document.createElement(tag);
  20. // eslint-disable-next-line
  21. for (const [k, v] of Object.entries(attrs)) {
  22. $el.setAttribute(k, v);
  23. }
  24. // eslint-disable-next-line
  25. for (const item of children) {
  26. $el.appendChild(render(item));
  27. }
  28. return $el;
  29. };
  30. const html = createElement({
  31. tag: 'div',
  32. attrs: {
  33. id: 'router-loadding',
  34. },
  35. children: [
  36. createElement({
  37. tag: 'div',
  38. attrs: {
  39. class: 'loadding',
  40. },
  41. children: [],
  42. }),
  43. ],
  44. });
  45. /* eslint-disable */
  46. const style = createElement({
  47. tag: 'style',
  48. attrs: {
  49. id: 'HHYANG_style',
  50. },
  51. children: [
  52. `
  53. body{padding:0;margin:0}#router-loadding{position:fixed;width:100%;height:3px;transition:all .05s;top:0;z-index:9999999999999999;}#router-loadding .loadding{position:fixed;top:0;height:3px;background-color:#47b14b;width:0;box-shadow:0 0 15px #4CAF50;transition:all .8s;border-top-right-radius:3px;border-bottom-right-radius:3px}
  54. `,
  55. ],
  56. });
  57. const script = createElement({
  58. tag: 'script',
  59. attrs: {
  60. id: 'HHYANG_script',
  61. },
  62. children: [
  63. `
  64. var HHYANG_El=document.querySelector("#router-loadding .loadding"),HHYANG_Pel=document.querySelector("#router-loadding"),w=0,stop=null,WH=window.innerWidth,loop=function(){w=w>=WH-35?w+parseInt(5*Math.random()):w+parseInt(35*Math.random());HHYANG_El.style.cssText="width:"+w+"px";w>=WH&&clearInterval(stop)};window.startLodding=function(a){a=void 0===a?500:a;HHYANG_Pel.style.cssText="display: block;";HHYANG_El.style.cssText="transition: all 0.8s;";w=0;clearInterval(stop);stop=setInterval(function(){loop()},a)};window.stopLodding=function(a){a=void 0===a?200:a;clearInterval(stop);HHYANG_El.style.cssText="width:"+WH+"px;transition: all "+a/1E3+"s;";HHYANG_Pel.style.cssText="opacity: 0;transition: all "+a/1E3+"s;";setTimeout(function(){HHYANG_Pel.style.cssText="display: none;";HHYANG_El.style.cssText="width:0px";w=0},a)};
  65. `,
  66. ],
  67. });
  68. export const DOM = {
  69. style,
  70. html,
  71. script,
  72. };
  73. /* eslint-enable */