34.Code formatting tools

<!DOCTYPE html>

<head>

<title>代码格式化工具</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

flex-direction: column;

align-items: center;

min-height: 100vh;

margin: 0;

background: linear-gradient(45deg, #3498db, #8e44ad);

color: white;

}

.container {

width: 90%;

max-width: 1200px;

background: rgba(255, 255, 255, 0.1);

padding: 2em;

border-radius: 10px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

backdrop-filter: blur(10px);

}

h1 {

text-align: center;

}

textarea {

width: 100%;

height: 300px;

margin-bottom: 1em;

padding: 0.5em;

border-radius: 5px;

border: none;

resize: vertical;

}

.buttons {

display: flex;

justify-content: space-between;

margin-bottom: 1em;

}

button {

padding: 0.5em 1em;

border: none;

border-radius: 5px;

background-color: #2ecc71;

color: white;

cursor: pointer;

transition: background-color 0.3s;

}

button:hover {

background-color: #27ae60;

}

select {

padding: 0.5em;

border-radius: 5px;

border: none;

}

</style>

</head>

<body>

<h1>代码格式化工具</h1>

<option value="js">JavaScript</option>

</select>

<button onclick="formatCode()">格式化代码</button>

<button onclick="copyToClipboard()">复制到剪贴板</button>

</div>

function formatCode() {

const input = document.getElementById('input');

const language = document.getElementById('language').value;

let formatted;

switch (language) {

case 'js':

formatted = js_beautify(input.value);

break;

case 'html':

formatted = html_beautify(input.value);

break;

case 'css':

formatted = css_beautify(input.value);

break;

}

input.value = formatted;

}

function copyToClipboard() {

const input = document.getElementById('input');

input.select();

document.execCommand('copy');

alert('代码已复制到剪贴板');

}

function clearCode() {

document.getElementById('input').value = '';

}

</script>

</body>

</html>