HTML+CSS+JS 表白代码

文章目录

    • 案例一 爱你到天昏地暗
    • 案例二 带有音乐的表白代码
    • 案例三 带有图片旋转的表白
    • 案例源码

案例一 爱你到天昏地暗

<html> 
<style type="text/css"> 
<!--
.STYLE1 {font-size: medium}
-->
</style> 
<center><br><br><br><br><HEAD> 
<title>恋爱表白神器</title> <h1 id="r1">在未来的日子里，也许什么都无法确定，但唯一可以确定的是，我爱的人是你</h1>  
<style type="text/css"> 
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #1400FF;
</style> 
<script type="text/javascript"> 
;(function(){
// Your message here (QUOTED STRING)
var msg = "某某某 我爱你  ";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){e = e || window.event;ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioningif(init.nopy){o.style.top = (b || document.body).scrollTop + 'px';o.style.left = (b || document.body).scrollLeft + 'px';};currStep -= rotation;for (var d, i = n; i > -1; --i){ // makes the circled = document.getElementById('iemsg' + i).style;d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';};
},
drag = function(){ // makes the resistancey[0] = Y[0] += (ymouse - Y[0]) * speed;x[0] = X[0] += (xmouse - 20 - X[0]) * speed;for (var i = n; i > 0; --i){y[i] = Y[i] += (y[i-1] - Y[i]) * speed;x[i] = X[i] += (x[i-1] - X[i]) * speed;};makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arraysif(!isNaN(window.pageYOffset)){ymouse += window.pageYOffset;xmouse += window.pageXOffset;} else init.nopy = true;for (var d, i = n; i > -1; --i){d = document.createElement('div'); d.id = 'iemsg' + i;d.style.height = d.style.width = a + 'px';d.appendChild(document.createTextNode(msg[i]));oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;};o.appendChild(oi); document.body.appendChild(o);setInterval(drag, 25);
},
ascroll = function(){ymouse += window.pageYOffset;xmouse += window.pageXOffset;window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){window.addEventListener('load', init, false);document.addEventListener('mouseover', mouse, false);document.addEventListener('mousemove', mouse, false);if (/Apple/.test(navigator.vendor))window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){window.attachEvent('onload', init);document.attachEvent('onmousemove', mouse);
};
})();
</script> 
<script type="text/javascript"> 
<!-- Begin
/** Notes on hue** This script uses hue rotation in the following manner:* hue=0   is red (#FF0000)* hue=60  is yellow (#FFFF00)* hue=120 is green (#00FF00)* hue=180 is cyan (#00FFFF)* hue=240 is blue (#0000FF)* hue=300 is magenta (#FF00FF)* hue=360 is hue=0 (#FF0000)** Notes on the script** This script should function in any browser that supports document.getElementById* It has been tested in Netscape7, Mozilla Firefox 1.0, and Internet Explorer 6** Accessibility** The script does not write the string out, but rather takes it from an existing* HTML element. Therefore, users with javascript disabled will not be adverely affected.* They just won't get the pretty colors.*//** splits par.firstChild.data into 1 span for each letter* ARGUMENTS*   span - HTML element containing a text node as the only element*/
function toSpans(span) {var str=span.firstChild.data;var a=str.length;span.removeChild(span.firstChild);for(var i=0; i<a; i++) {var theSpan=document.createElement("SPAN");theSpan.appendChild(document.createTextNode(str.charAt(i)));span.appendChild(theSpan);}
}
function RainbowSpan(span, hue, deg, brt, spd, hspd) {this.deg=(deg==null?360:Math.abs(deg));this.hue=(hue==null?0:Math.abs(hue)%360);this.hspd=(hspd==null?3:Math.abs(hspd)%360);this.length=span.firstChild.data.length;this.span=span;this.speed=(spd==null?50:Math.abs(spd));this.hInc=this.deg/this.length;this.brt=(brt==null?255:Math.abs(brt)%256);this.timer=null;toSpans(span);this.moveRainbow();
}
RainbowSpan.prototype.moveRainbow = function() {if(this.hue>359) this.hue-=360;var color;var b=this.brt;var a=this.length;var h=this.hue;for(var i=0; i<a; i++) {if(h>359) h-=360;if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }h+=this.hInc;this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";}this.hue+=this.hspd;
}
// End -->
</script> 
</HEAD> 
<BODY><style> 
body {padding:0;margin:0;background-image:url();background-repeat: no-repeat;background-position:bottom;
background-color: black;
color: #ffffff;
font: normal 80% Verdana;
margin-top: 0px;
margin-left: 0px;
padding: 0;
margin-right: 0px;
}
</style> 
<div align="center"> 
<h1 id="r2">我会珍惜和你在一起的每一刻，每一分，每一秒。</h1>
</div> 
<script type="text/javascript"> 
var r1=document.getElementById("r1"); //get span to apply rainbow
var myRainbowSpan=new RainbowSpan(r1, 0, 360, 255, 50, 18); //apply static rainbow effect
myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed);
</script> 
<div align="center"> 
<p class="STYLE1" id="r2">我喜欢你，真的很喜欢，就像向日葵如此依赖太阳一般的喜欢。</p> 
</div> 
<script type="text/javascript"> 
var r2=document.getElementById("r2"); //get span to apply rainbow
var myRainbowSpan2=new RainbowSpan(r2, 0, 360, 255, 50, 348); //apply static rainbow effect
myRainbowSpan2.timer=window.setInterval("myRainbowSpan2.moveRainbow()", myRainbowSpan2.speed);
</script> 
</html> <html> 
<body bgcolor="#000000"> 
<body onContextMenu="alert('某某某 我爱你'); return false" NOOP="if (window.event != null && window.event.button == 2) alert ('Thanks...');"> 
<style type="text/css"> 
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #ff0000;position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style> 
<script type="text/javascript"> 
;(function(){
// Your message here (QUOTED STRING)
var msg = "";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split(');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){e = e || window.event;ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioningif(init.nopy){o.style.top = (b || document.body).scrollTop + 'px';o.style.left = (b || document.body).scrollLeft + 'px';};currStep -= rotation;for (var d, i = n; i > -1; --i){ // makes the circled = document.getElementById('iemsg' + i).style;d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';};
},
drag = function(){ // makes the resistancey[0] = Y[0] += (ymouse - Y[0]) * speed;x[0] = X[0] += (xmouse - 20 - X[0]) * speed;for (var i = n; i > 0; --i){y[i] = Y[i] += (y[i-1] - Y[i]) * speed;x[i] = X[i] += (x[i-1] - X[i]) * speed;};makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arraysif(!isNaN(window.pageYOffset)){ymouse += window.pageYOffset;xmouse += window.pageXOffset;} else init.nopy = true;for (var d, i = n; i > -1; --i){d = document.createElement('div'); d.id = 'iemsg' + i;d.style.height = d.style.width = a + 'px';d.appendChild(document.createTextNode(msg[i]));oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;};o.appendChild(oi); document.body.appendChild(o);setInterval(drag, 25);
},
ascroll = function(){ymouse += window.pageYOffset;xmouse += window.pageXOffset;window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){window.addEventListener('load', init, false);document.addEventListener('mouseover', mouse, false);document.addEventListener('mousemove', mouse, false);if (/Apple/.test(navigator.vendor))window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){window.attachEvent('onload', init);document.attachEvent('onmousemove', mouse);
};
})();
</script> 
<center><div style="border: 2px solid ; overflow: auto; color: black; background-color: black; width: 80%;"> 
<h2> 
<center> 
<script language="JavaScript1.2">var message="那么，你能答应，和我永远在一起吗？"
var neonbasecolor="white"
var neontextcolor="red"
var flashspeed=100  //in milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></h2> 
<img src="love.jpg" align="middle" border="0"><br /> <td><center> 
<FONT face="Monotype Corsiva" size="3" color="#ffffff"> 我只想给你一颗真心,<br>我只想努力去疼爱你,<br>我只想一辈子陪伴你,<br>我想说 我爱你.表达出我自己的意思,不想憋在心里,<br>我想要和你一起慢慢变老<br>我不要短暂的温存,只要你一世的陪伴
<center><tr> 
</tr> 
</table> 
<br /> 
</script> <script type='text/javascript'> 
/*Important Function to blend the tabs in and out*/
function blendoff(idname) {document.getElementById(idname).style.display = 'none';}
function blendon(idname) {document.getElementById(idname).style.display = 'block';}
</script> </FONT></P></FONT><BGSOUND balance=0 volume=0 loop=infinite>
</body>
</html>

效果图：

在这里插入图片描述

案例二 带有音乐的表白代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Love</title><link type="text/css" rel="stylesheet" href="./js/default.css"><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/jscex.min.js"></script><script type="text/javascript" src="./js/jscex-parser.js"></script><script type="text/javascript" src="./js/jscex-jit.js"></script><script type="text/javascript" src="./js/jscex-builderbase.min.js"></script><script type="text/javascript" src="./js/jscex-async.min.js"></script><script type="text/javascript" src="./js/jscex-async-powerpack.min.js"></script><script type="text/javascript" src="./js/functions.js" charset="utf-8"></script><script type="text/javascript" src="./js/love.js" charset="utf-8"></script>
</head><body><audio autoplay id="playMusic"><source src="./music/love.mp3" type="audio/mp3"></audio><div id="main"><div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&amp;brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div><div id="wrap"><div id="text"><div id="code"><font color="#FF0000"><span class="say">亲爱的宝贝：</span><br><span class="say">这是我们在一起的第一个情人节</span><br><span class="say"> </span><br><span class="say">也真希望和你在一起的每一天都是，记得</span><br><span class="say"> </span><br><span class="say">我们第一次聊天时候，我记得你说过 “一眼一生” 多么浪漫的事情</span><br><span class="say">我们相互对彼此说的一些情话，时常在我梦里出现的你</span><br><span class="say"> </span><br><span class="say">晚上依然挂不断的电话，伴你入睡的歌谣，还有好多好多我们一起要去做的事情</span><br><span class="say"> </span><br><span class="say">晚一点遇到你，希望余生都是你</span><br><span class="say"><span class="space"></span> -- 你家先生--</span></font><p></p></div></div><div id="clock-box"><span class="STYLE1"></span><font color="#33CC00">亲爱的电脑，我们在一起</font>
<span class="STYLE1">已经有……</span><div id="clock"></div></div><canvas id="canvas" width="1100" height="680"></canvas></div></div><script></script><script>(function(){var canvas = $('#canvas');if (!canvas[0].getContext) {$("#error").show();return false;        }var width = canvas.width();var height = canvas.height();canvas.attr("width", width);canvas.attr("height", height);var opts = {seed: {x: width / 2 - 20,color: "rgb(190, 26, 37)",scale: 2},branch: [[535, 680, 570, 250, 500, 200, 30, 100, [[540, 500, 455, 417, 340, 400, 13, 100, [[450, 435, 434, 430, 394, 395, 2, 40]]],[550, 445, 600, 356, 680, 345, 12, 100, [[578, 400, 648, 409, 661, 426, 3, 80]]],[539, 281, 537, 248, 534, 217, 3, 40],[546, 397, 413, 247, 328, 244, 9, 80, [[427, 286, 383, 253, 371, 205, 2, 40],[498, 345, 435, 315, 395, 330, 4, 60]]],[546, 357, 608, 252, 678, 221, 6, 100, [[590, 293, 646, 277, 648, 271, 2, 80]]]]]],bloom: {num: 700,width: 1080,height: 650,},footer: {width: 1200,height: 5,speed: 10,}}var tree = new Tree(canvas[0], width, height, opts);var seed = tree.seed;var foot = tree.footer;var hold = 1;canvas.click(function(e) {//播放音乐$("#playMusic")[0].play();var offset = canvas.offset(), x, y;x = e.pageX - offset.left;y = e.pageY - offset.top;if (seed.hover(x, y)) {hold = 0;canvas.unbind("click");canvas.unbind("mousemove");canvas.removeClass('hand');}}).mousemove(function(e){var offset = canvas.offset(), x, y;x = e.pageX - offset.left;y = e.pageY - offset.top;canvas.toggleClass('hand', seed.hover(x, y));});var seedAnimate = eval(Jscex.compile("async", function () {seed.draw();while (hold) {$await(Jscex.Async.sleep(10));}while (seed.canScale()) {seed.scale(0.95);$await(Jscex.Async.sleep(10));}while (seed.canMove()) {seed.move(0, 2);foot.draw();$await(Jscex.Async.sleep(10));}}));var growAnimate = eval(Jscex.compile("async", function () {do {tree.grow();$await(Jscex.Async.sleep(10));} while (tree.canGrow());}));var flowAnimate = eval(Jscex.compile("async", function () {do {tree.flower(2);$await(Jscex.Async.sleep(10));} while (tree.canFlower());}));var moveAnimate = eval(Jscex.compile("async", function () {tree.snapshot("p1", 240, 0, 610, 680);while (tree.move("p1", 500, 0)) {foot.draw();$await(Jscex.Async.sleep(10));}foot.draw();tree.snapshot("p2", 500, 0, 610, 680);// 会有闪烁不得意这样做, (＞﹏＜)canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");canvas.css("background", "#ffe");$await(Jscex.Async.sleep(300));canvas.css("background", "none");}));var jumpAnimate = eval(Jscex.compile("async", function () {var ctx = tree.ctx;while (true) {tree.ctx.clearRect(0, 0, width, height);tree.jump();foot.draw();$await(Jscex.Async.sleep(25));}}));var textAnimate = eval(Jscex.compile("async", function () {var together = new Date();together.setFullYear(2019,5,12);           //时间年月日together.setHours(0);                      //小时together.setMinutes(0);                    //分钟together.setSeconds(0);                 //秒前一位together.setMilliseconds(2);                //秒第二位$("#code").show().typewriter();$("#clock-box").fadeIn(500);while (true) {timeElapse(together);$await(Jscex.Async.sleep(1000));}}));var runAsync = eval(Jscex.compile("async", function () {$await(seedAnimate());$await(growAnimate());$await(flowAnimate());$await(moveAnimate());textAnimate().start();$await(jumpAnimate());}));runAsync().start();})();</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;"></div></body></html>

效果图：

在这里插入图片描述

案例三 带有图片旋转的表白

<!doctype html>
<html><head><meta charset="utf-8"/><meta name="keywords" content=""/><meta name="description" content=""/><title>520表白</title><style style="text/css">*{margin:0;padding:0;}body{background:url("images/1.jpg");background-size:cover;}/*start top*/.top{width:400px;height:100px;margin:60px auto;font-size:30px;font-family:"华文行楷";color:#fff;<!--background:-webkit-linear-gradient(45deg,#ff0000,#ffcc00,#ffff99,#33ccff,#00ff33,#6600ff,#333399);-webkit-background-clip:text;-->}/*end top*//*start box*/.box{width:310px;height:310px;margin:auto;perspective:800px;/*景深*/}.box .pic{position:relative;transform-style:preserve-3d;/*3d环境*/ animation:play 10s linear infinite;/*动画名称 执行时间 匀速 无限执行*/}.box ul li{list-style:none;position:absolute;top:0;left:0;}/*start box*//*定义一个关键帧*/@keyframes play{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}/*start text*/#text{width:500px;height:200px;color:#6fade1;margin:auto;font-size:24px;font-family:"方正喵呜体";}/*end text*/</style></head><body><!--start top--><div class="top"><marquee behavior="alternate">时光不老，我们不散</marquee></div><!--end top--><!--start box--><div class="box"><div class="pic"><ul><li><img src="images/1.png" width="" height="" alt=""/></li><li><img src="images/2.png" width="" height="" alt=""/></li><li><img src="images/3.png" width="" height="" alt=""/></li><li><img src="images/4.png" width="" height="" alt=""/></li><li><img src="images/5.png" width="" height="" alt=""/></li><li><img src="images/6.png" width="" height="" alt=""/></li></ul></div></div><!--end box--><!--start text--><div id="text"></div><!--end text--><embed src="music.mp3" hidden="true"/><script src="js/jquery.min.js"></script><!--雪花--><script src="js/snow.js"></script><script>$(".pic ul li").each(function(i){//遍历var deg=360/$(".pic ul li").size();//size个数//当前的li对象 添加css样式$(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});$.fn.snow({minSize:10,maxSize:15,newOn:500,flakeColor:"#ffffff"});});var i=0;var str="我们早就表明态度:不愿过520，但也不怕过520，必要时不得不过520。面对情侣的软硬两手，大家也早已给出答案:谈520，大门敞开;过520，奉陪到底。经历了五千多年风风雨雨的中华民族，什么样的阵势没见过？~";window.onload=function typing(){//获取divvar mydiv=document.getElementById("text");mydiv.innerHTML+=str.charAt(i);i++;var id=setTimeout(typing,100);if(i==str.length){clearTimeout(id);}}</script></body>
</html>

效果图
在这里插入图片描述

案例源码

点击下载

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/530998.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux常用命令与基本操作、填空题、简答题

Linux常用命令与基本操作、填空题、简答题

文章目录基本知识点基本操作叙述什么是shell?重启虚拟机网络分区查看当前进程查看主机名重启关机查看IP地址文件搜索挂载查看网络配置linux系统中Vi的三种模式磁盘分区查看硬盘信息df&#xff0c;fdisk&#xff0c;lsblk区别进程用户用户信息查看用户密码信息修改密码添加用户…
阅读更多...
客户端与服务器（C/S架构与B/S架构）、AJax学习

客户端与服务器（C/S架构与B/S架构）、AJax学习

文章目录HTTP请求与服务器客户端与服务器1.C/S架构与B/S架构2.web资源介绍3.资源访问流程HTTP协议1.什么是协议&#xff1f;2.什么是HTTP协议3.HTTP组成部分4.请求的发送方式什么是Ajax技术Ajax可以做什么&#xff1f;伪造AjaxHTTP请求与服务器 客户端与服务器 1.C/S架构与B/…
阅读更多...
前端必会技巧

前端必会技巧

文章目录点击输入框提示信息防止别人盗取视频设置输入边框透明按钮跳转a标签如何具有bootstra按钮样式formData的使用boostrap上传样式jq获取input标签的值jq获取最近一个td标签的值css设置几个div中的图片保持在一条水平线使div居中canvas 网页背景 粒子鼠标跟随磁力登录界面添…
阅读更多...
linux基础必备

linux基础必备

文章目录Linux系统中常用目录结构Linux下如何从普通用户切换到root用户Linux系统常用命令Linux系统文件中相关指令Linux查看开机自启动服务Linux常见服务列表Linux关闭某些服务&#xff08;临时关闭&#xff09;Linux关闭服务开机自启动Linux中在屏幕输入一句话Linux查看系统进…
阅读更多...
Hadoop搭建集群中输入hdfs namenode -format格式化节点时，提示：hdfs: command not found 解决办法

Hadoop搭建集群中输入hdfs namenode -format格式化节点时，提示：hdfs: command not found 解决办法

分析原因&#xff1a; hadoop的安装路径没有加入到当前路径中 解决办法&#xff1a; 方法1&#xff1a; 进入hadoop的安装目录&#xff0c;在执行hadoop命令时在前面加上&#xff1a;./bin ./sbin 方法2: 进入/etc/profile文件中添加hadoop的安装路径 sudo vim /etc/profile添…
阅读更多...
Linux高级编程实验（30个）

Linux高级编程实验（30个）

文章目录1&#xff09;输出Linux下的c也不是太难嘛&#xff01;在linux下编辑&#xff0c;编译&#xff0c;运行2&#xff09;编写一个简单地c语言程序,根据输入的两个整数求平均值并且在终端输出&#xff0c;通过gcc编译器得到它的汇编程序文件。3&#xff09;编写一个c语言程…
阅读更多...
登录界面验证码的实现

登录界面验证码的实现

文章目录Javaweb实现验证码前端后台Springboot添加验证码项目结构依赖控制类前端页面效果图Javaweb实现验证码 前端 添加样式 <meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0, minimum-scale1.…
阅读更多...
Javaweb MVC设计模式、Modle发展史、项目分层和三层架构

Javaweb MVC设计模式、Modle发展史、项目分层和三层架构

文章目录MVC设计模式MVC的目的MVC举例jspservletjavabean模式MVC的优点MVC的缺点Modle 发展史项目分层三层架构MVC设计模式 MVC模式&#xff08;Model-View-Controller&#xff09;是软件工程中的一种软件架构模式&#xff0c;把软件系统分为三个基本部分&#xff1a;模型&…
阅读更多...
HTML表格和HTML表单

HTML表格和HTML表单

HTML 表格 表格由 <table> 标签来定义每个表格均有若干行&#xff08;由 <tr> 标签定义&#xff09;&#xff0c;每行被分割为若干单元格&#xff08;由 <td> 标签定义&#xff09; 字母 td 指表格数据&#xff08;table data&#xff09;&#xff0c;即数据…
阅读更多...
解决虚拟机没有ens33网卡的问题

解决虚拟机没有ens33网卡的问题

话不多说&#xff0c;直接操作 解决办法 1.在终端中输入: sudo vim /etc/network/interfaces进入interfaces文件后&#xff0c;然后输入以下代码&#xff0c;然后保存退出 auto ens33 iface ens33 inet dhcp 2.重启虚拟机 输入ifconfig命令&#xff0c;成功启动ens33网卡
阅读更多...
Springboot分层图解

Springboot分层图解

阅读更多...
HDFS上传文件命令报错org.apache.hadoop.ipc.RemoteException(java.io.IOException)

HDFS上传文件命令报错org.apache.hadoop.ipc.RemoteException(java.io.IOException)

作为作者&#xff0c;强烈不建议进行格式化hadoop&#xff0c;毕竟开发数据是最为重要的&#xff01; Hadoop 3.1 hdfs dfs -put /源文件路径 /目的文件路径解决方案 第一步&#xff1a;停止主节点&#xff08;Master&#xff09;和子节点服务&#xff08;Slave&#xff09; …
阅读更多...
图（Graph）的学习

图（Graph）的学习

文章目录图的认识图的概念无向图有向图简单图完全图子图连通、连通图、连通分量边的权和网加权图邻接和关联路径简单路径、简单回路环顶点的度、入度和出度割点&#xff08;关节点&#xff09;桥(割边)距离有向树图的表示邻接列表邻接矩阵图的遍历深度优先遍历广度优先遍历生成…
阅读更多...
并查集（Disjiont Set）

并查集（Disjiont Set）

并查集 并查集的最大作用是检测一个图上面存不存在环。 无向图&#xff0c;六个顶点 显然 1-2-4-3连成一个环 #include<stdio.h> #include<stdlib.h>#define VERTICES 6void initialise(int parent[]){int i;for(i0;i<VERTICES;i){parent[i]-1; }}int find_…
阅读更多...
采用Kruskal算法生成最小生成树，并采用并查集的合并优化和查询优化。

采用Kruskal算法生成最小生成树，并采用并查集的合并优化和查询优化。

文章目录最小生成树1.什么是图的最小生成树&#xff08;MST&#xff09;?2.最小生成树用来解决什么问题&#xff1f;Kruskal&#xff08;克鲁斯卡尔&#xff09;算法算法描述图解最小生成树 1.什么是图的最小生成树&#xff08;MST&#xff09;? 用N-1条边连接N个点&#x…
阅读更多...
Java连接Mysql数据库（JDBC）

Java连接Mysql数据库（JDBC）

文章目录导入包con、stmt、rs 三者存在一定的关系getInt和getStringinput.nextInt();简单使用讲解ResultSet和StatementPreparedStatement的用法JDBC连接代码更多样例导入包 import java.sql.Connection; import java.sql.DriverManager; import java.sql.statement; import j…
阅读更多...
Linux编程考前测试题

Linux编程考前测试题

文章目录选择题多选题判断题填空题简答题编程题选择题 1:当打开vi文本编辑器编辑文件时&#xff0c;vi处于&#xff08;A&#xff09;模式 A: 命令模式 B: 编辑模式 C: 实模式 D: 虚模式 2:下列有关fork&#xff08;&#xff09;函数返回值说法错误的是&#xff08;D&#xf…
阅读更多...
MySQL考试复习（知识点、练习题）

MySQL考试复习（知识点、练习题）

文章目录数据库的管理技术的三个阶段发展的三个阶段数据库的锁数据库设计的基本步骤事务的四大特性什么是视图如果关系模式设计不好&#xff0c;可能带来哪几个问题数据库管理系统的主要功能有哪些数据库系统中的常见故障有哪些简述SQL语言的组成说明关系模型有哪三类完整性规则…
阅读更多...
Oracle复习（知识点、练习题、实验）

Oracle复习（知识点、练习题、实验）

文章目录第一章 数据库概念数据库的三级模式结构&#xff1a;模式、外模式、内模式三级模式之间的映射第二章 Oracle12g体系结构Oracle的逻辑存储结构Oracle物理存储结构Oracle11g服务器结构系统全局区&#xff08;SGA&#xff09;程序全局区&#xff08;PGA&#xff09;第三章…
阅读更多...
Openstack面试题和知识点总结

Openstack面试题和知识点总结

文章目录知识点云计算起源定义特点分类服务类型平台分类应用虚拟化虚拟化技术定义分类云计算和虚拟化的关系虚拟化的优点OpenStack简介核心架构Openstack组件共享服务组件核心组件组件详解RabbitMQ概念特点rabbitmq中的概念工作原理常用操作MemcachedKeystoneGlance工作原理Nov…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023