有趣的辞职信

最新推荐文章于 2022-03-17 21:12:02 发布

liuliwei09

最新推荐文章于 2022-03-17 21:12:02 发布

阅读量277

点赞数

分类专栏：微信前端 js+css 文章标签： js css html javascript vue

本文链接：https://blog.csdn.net/liuliwei09/article/details/113061069

版权

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

js+css

6 篇文章 1 订阅

订阅专栏

微信

2 篇文章 0 订阅

订阅专栏

有趣的辞职信

使用纯js + css 实现元素的控制，主要使用单击事件、鼠标悬停事件、样式修改等

辞职信的内容，通过文字打印的方式显现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title> 有趣的辞职信 </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta charset="utf-8">
 <style type="text/css">
 #myDiv{
  top: 10%;
  left:30%;
  position:absolute;
  display: inline-block;
  width:700px;
  height:600px;
  background-color:rgba(0,0,0,0.3);
  word-wrap:break-word;
  line-height:30px;
  letter-spacing:3px;
  padding-left:3px;
  text-indent:40px;
  border-radius:5px;
  -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
 }
 </style>
 <script type="text/javascript">
    // 文字打印效果
	window.onload = function () {
		var myDiv = document.getElementById("myDiv2");
		var contentArr = "据说世界很大，我也想去看看……".split("");
		var content = "";
		var index = 0;
		var ID = setInterval(function () {
			content += contentArr[index];
			myDiv.innerHTML = content + "_";
			index++;
			if(index === contentArr.length){
				myDiv.innerHTML = content ;
				clearInterval(ID);
				console.log("结束了");
			}
		},250);
	}
    
	// 鼠标悬停事件 随机位置
	function MouseOver(node){
		// 0- 500
		var num1 = Math.random().toFixed(2)*470 + 90;
        node.style["margin-right"] = num1 + "px";
		// 0 -470
		var num2 = 0 - Math.random().toFixed(2)*500;
		node.style["margin-top"] = num2 + "px";
    }
    
	// 文字变色
	function createHexArray(n) {
		this.length = n;
		for (var i = 1; i <= n; i++)
			this[i] = i - 1;
			this[11] = "A";
			this[12] = "B";
			this[13] = "C";
			this[14] = "D";
			this[15] = "E";
			this[16] = "F";
			return this;
		}
		hx = new createHexArray(16);
		function convertToHex(x){
			if (x < 17)
				x = 16;
			var high = x / 16;
			var s = high+"";
			s = s.substring(0, 2);
			high = parseInt(s, 10);
			var left = hx[high + 1];
			var low = x - high * 16;
			if (low < 1)
				low = 1;
			s = low + "";
			s = s.substring(0, 2);
			low = parseInt(s, 10);
			var right = hx[low + 1];
			var string = left + "" + right;
			return string;
		}
		function makeRainbow(text){
			text = text.substring(0, text.length);
			color_d1 = 255;
			mul = color_d1 / text.length;
			for(var i = 0; i < text.length; i++) {
				color_d1 = 255*Math.sin(i / (text.length / 3));
				color_h1 = convertToHex(color_d1);
				color_d2 = mul * i;
				color_h2 = convertToHex(color_d2);
				k = text.length;
				j = k - i;
			if (j < 0)
				j = 0;
			color_d3 = mul * j;
			color_h3 = convertToHex(color_d3);
			document.write("<FONT COLOR=\"#" + color_h3 + color_h1 + 
			color_h2 + "\">" + text.substring(i, i + 1) + "</FONT>");
		}
	}
    
	// 展示 【同意】结果
	function ShowThanks(node){
		var xiexieDiv = document.getElementById("xiexie");
		xiexieDiv.style.display = "block";
		var myDiv = document.getElementById("myDiv");
		myDiv.style.display = "none";
	}


</script>
</head>
<body>
<div id="myDiv">
  <div id="myDiv1" style="margin-left:-40px;">领导：</div>
  <div id="myDiv2" style="height:500px;"></div>
  <div id="tongyi" onclick="ShowThanks(this)" style="margin-left:200px;float:left;width:115px;height:50px;line-height:50px;background-color:#0BB543;border-radius:15px;color:#ffffff;">同意</div>
  <div id="butongyi" onmouseover="MouseOver(this)" style="margin-right:150px;float:right;width:115px;height:50px;line-height:50px;background-color:#ff0000;border-radius:15px;color:#ffffff;padding-right:15px;">不同意</div>
</div>


<center id="xiexie" style="position:absolute;top:40%;left:45%;display:none;">
	<strong>
		<font size=6>
			<script>
				<!--
				// change to your own text ...
				makeRainbow("谢谢！老板。");
				// -->
			</script>
		</font>
	</strong>
</center>


</body>
</html>

最后的效果：当鼠标悬停到【不同意】按钮时，触发悬停事件，导致这个按钮的位置发生改变，无法选中【不同意】按钮；最终只能选择【同意】按钮。

在这里插入图片描述

liuliwei09

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
有趣的辞职信

有趣的辞职信使用纯js + css 实现元素的控制，主要使用单击事件、鼠标悬停事件、样式修改等辞职信的内容，通过文字打印的方式显现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title> 有趣的辞职信 </title&
复制链接

扫一扫

专栏目录