通过在head中注入代码 自定义halo网页

1.添加鼠标点击特效

在github上找到一个挺好玩的鼠标点击特效

github链接：https://github.com/AaaXya/firework

进github查看项目

进style.css将css配置复制出来放到<style></style>中

* {
    margin: 0;
    padding: 0;
}

body {
    background: #c27ecf;
}

.aixin {
    position: absolute;
    transform: translate(0px, 0px) scale(1);
    transition: all 0.7s ease-out;
}

.aixin::before,
.aixin::after {
    content: '';
    position: absolute;
    left: 10px;
    height: 16px;
    width: 10px;
    background-color: inherit;
    border-radius: 5px 5px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.aixin::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}
CSS

将script中的内容放到<script></script>中

class CreatePattern {
    constructor(el, x, y, config = {}) {
        this.root = el
        this.x = x
        this.y = y
        this.options = {
            type: 'aixin',
            quantity: 10,
            distanceMax: 100,
            distanceMin: 20,
            palette: ['f9f383', 'eb125f', '6eff8a', '66ffff'],
            ...config,
        }
        this.growUp()
    }

    giveBirthToAChild() {
        const initialStyles = document.createElement('i')
        const randomColor =
            this.options.palette[Math.floor(Math.random() * this.options.palette.length)]
        //必须写成个函数每次调用一次保证得到不同的值
        const randomTranslateValue = () =>
            (Math.random() < 0.5 ? -1 : 1) *
            (this.options.distanceMin +
                Math.random() * (this.options.distanceMax - this.options.distanceMin))

        this.root.append(initialStyles)
        initialStyles.classList.add(this.options.type)
        setTimeout(() => {
            initialStyles.style.cssText = `background-color:#${randomColor};
            left:${this.x}px;top:${this.y}px;
            z-index:999;
            transform: translate(${randomTranslateValue()}px,${randomTranslateValue()}px) scale(0)`
        }, 0)
        setTimeout(() => {
            initialStyles.remove()
        }, 700)
    }

    growUp() {
        for (let i = 0; i < this.options.quantity; i++) this.giveBirthToAChild()
    }
}

const el = document.createElement('div')

addEventListener('load', () => {
    document.body.append(el)

    document.addEventListener('click', function (e) {
        new CreatePattern(el, e.pageX, e.pageY)
    })
})
JavaScript

然后在halo的注入代码菜单中，将代码写成html格式 注入到head中

最终的代码如下

//添加一个css
<style>
	svg use {  
	  fill: blue; 
	}
	/* 添加一些样式以制作特效 */
   * {
	  margin: 0;
	  padding: 0;
  }
  
  body {
	  background: #c27ecf;
  }
  
  .aixin {
	  position: absolute;
	  transform: translate(0px, 0px) scale(1);
	  transition: all 0.7s ease-out;
  }
  
  .aixin::before,
  .aixin::after {
	  content: '';
	  position: absolute;
	  left: 10px;
	  height: 16px;
	  width: 10px;
	  background-color: inherit;
	  border-radius: 5px 5px 0 0;
	  transform: rotate(-45deg);
	  transform-origin: 0 100%;
  }
  
  .aixin::after {
	  left: 0;
	  transform: rotate(45deg);
	  transform-origin: 100% 100%;
  }
		   
  </style>

// 新增一个js，将刚才复制的内容放进来
  <script>
	class CreatePattern {
	  constructor(el, x, y, config = {}) {
		  this.root = el
		  this.x = x
		  this.y = y
		  this.options = {
			  type: 'aixin',
			  quantity: 10,
			  distanceMax: 100,
			  distanceMin: 20,
			  palette: ['f9f383', 'eb125f', '6eff8a', '66ffff'],
			  ...config,
		  }
		  this.growUp()
	  }
  
	  giveBirthToAChild() {
		  const initialStyles = document.createElement('i')
		  const randomColor =
			  this.options.palette[Math.floor(Math.random() * this.options.palette.length)]
		  //必须写成个函数每次调用一次保证得到不同的值
		  const randomTranslateValue = () =>
			  (Math.random() < 0.5 ? -1 : 1) *
			  (this.options.distanceMin +
				  Math.random() * (this.options.distanceMax - this.options.distanceMin))
  
		  this.root.append(initialStyles)
		  initialStyles.classList.add(this.options.type)
		  setTimeout(() => {
			  initialStyles.style.cssText = `background-color:#${randomColor};
			  left:${this.x}px;top:${this.y}px;
			  z-index:999;
			  transform: translate(${randomTranslateValue()}px,${randomTranslateValue()}px) scale(0)`
		  }, 0)
		  setTimeout(() => {
			  initialStyles.remove()
		  }, 700)
	  }
  
	  growUp() {
		  for (let i = 0; i < this.options.quantity; i++) this.giveBirthToAChild()
	  }
  }
  
  const el = document.createElement('div')
  
  addEventListener('load', () => {
	  document.body.append(el)
  
	  document.addEventListener('click', function (e) {
		  new CreatePattern(el, e.pageX, e.pageY)
	  })
  })
  


	//以下部分是为了删除Aurora主题左下角的机器人
	//所有资源加载完成后执行
	window.addEventListener("load", function() {
	  $("#bot-container").remove();
	  //$("#Aurora-Dia--tips").html("halo");
  


	  //为增加新的页签做准备
	  console.log($(".menus").find('.list-none').find('li:eq(0)').html());
	});
  
	// document.title = "test";
	</script>
HTML

  • window.addEventListener来绑定一个事件监听器，当页面加载完成时触发

  • halo是有引用jQuery库的，可以使用jQuery的选择器$("#bot-container")来选择页面中id为"bot-container"（也就是机器人的id）的元素

  • 然后使用remove()方法来移除

在常规情况下，<script>标签中的脚本会在网页加载过程中自动执行。当浏览器解析到<script>标签时，会立即执行其中的JavaScript代码。

然而，有一些情况下可以手动触发脚本的执行。例如，使用事件触发器（如按下按钮或链接点击）来调用JavaScript函数，或者在特定条件下执行某些操作。

此外，还可以使用JavaScript内置的定时器函数（如setTimeout()和setInterval()）来延迟执行或周期性地执行脚本。