目次
1.エフェクト表示
添加：
減算:
乗算：
分割：
0 による除数:
2. ソースコード
2.1HTML+CSS ソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="cal.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.cal {
width: 400px;
background-color: skyblue;
margin: 50px auto;
border-radius: 10px;
}
.cal h1 {
background-color: rebeccapurple;
height: 60px;
line-height: 60px;
border-radius: 10px 10px 0 0;
text-align: center;
color: azure;
}
.from-control {
padding: 25px 50px;
}
.form-control label {
text-align: right;
}
.form-control,input {
padding: 5px 10px;
height: 20px;
border: 1px black;
border-radius: 5px;
}
.form-control,button{
width: 67px;
height: 32px;
font-size: 25px;
border-radius: 5px;
border: none;
background-color: forestgreen;
}
.result {
height: 25px;
width: 200px;
}
</style>
</head>
<body>
<div class="cal">
<h1>COUNTER</h1>
<div class="from-control">
<label>NumberOne</label>
<input type="text" id="num1"/>
</div>
<div class="from-control">
<label>NumberTwo</label>
<input type="text" id="num2"/>
</div>
<div class="from-control">
<button id="plus">+</button>
<button id="reduce">-</button>
<button id="mul">*</button>
<button id="dev">/</button>
</div>
<div class="from-control">
<label >RESULT</label>
<input type="text" class="result"/>
</div>
</div>
</body>
</html>2.2 JS ソースコード
window.addEventListener('load',function(){
document.querySelector('#plus').onclick = function() {
cal('+');
}
document.querySelector('#reduce').onclick = function() {
cal('-');
}
document.querySelector('#mul').onclick = function() {
cal('*');
}
document.querySelector('#dev').onclick = function() {
cal('/');
}
function cal(symbom) {
let num1 = document.getElementById('num1').value;
let num2 = document.getElementById('num2').value;
let result = document.querySelector('.result');
if(symbom == '/') {
if(num2 == 0) {
result.value = "除数不能为零";
}else {
result.value = num1 / num2;
}
}else {
result.value = eval(num1 + symbom + num2);
}
}
})3.CSS プロパティ
3.1幅、高さ属性
width は幅を設定し、 height は高さを設定します。
<body>
<input type="button" value="按钮"/>
</body>元のボタンのサイズ:
幅と高さの変更後:
<style>
#but{
height: 60px;
width: 100px;
}
</style>
<body>
<input type="button" value="按钮" id="but"/>
</body>
3.2font-size プロパティ
font-sizeはフォントサイズを設定する属性で、共通単位はpxです。たとえば、段落のフォントを 30px に設定します。
<style>
.title {
font-size: 30px;
}
</style>
<body>
<a class="title">这是一段话</a>
</body>
フォントサイズの変更後:
3.3margin プロパティ
margin属性は余白を変更する属性で、 margin には 4 つのパラメーター値があります。したがって、4 つのマージン ケースがあります。
ケース1
margin:10px,15px,20px,30px;- 上余白は10px
- 右マージンは 15px
- 下マージンは20px
- 左余白は 30px
ケース 2
margin:20px,30px,15px- 上余白は20px
- 右マージンは 30px
- 下マージンは15px
ケース 3
margin:10px,20px- 上余白は10px
- 右マージンは 20px
ケース 4
margin:50px- 4 つの余白はすべて 50px です
効果を示すために、4 つのマージンの場合を考えてみましょう。
<style>
.ty {
margin:50px ;
}
</style>
<body>
<div class="ty">
<label>这是一个label:</label>
<input type="text" />
</div>
</body>
3.4 パディングプロパティ
上記のように、margin は外側のマージンを設定するものであり、内側のマージンはpaddingによって変更されます。4 つの状況があります。
ケース1
padding:10px,5px,15px,20px;- トップパディングは10pxです
- 右パディングは 5px
- 下の余白は 15px
- 左パディングは 20px
ケース 2
padding:10px,5px,15px;- トップパディングは10pxです
- 右パディングと左パディングは 5px です
- 下の余白は 15px
ケース 3
padding:10px,5px;- 上下のパディングは10px
- 右パディングと左パディングは 5px です
ケース 4
padding:100px;- 上下左右のパディングは100px
例としてケース 4 を見てみましょう。
<style>
.test {
padding: 50px;
}
</style>
<body>
<table border="1">
<tr><td class="test"></td></tr>
</table>
</body>効果は次のとおりです。
3.5 background-color プロパティ
background-color属性によって達成される効果は
<style>
.title {
background-color: skyblue;
}
</style>
<body>
<a class="title">这是一段话</a>
</body>
表示効果:
3.6 ボーダー属性
border属性は、境界線を変更するための属性で、境界線のサイズと色を設定できます。構文は次のとおりです: border: size solid color;サイズのみがあり、solid 値がない場合、デフォルトの色は黒です。
<style>
.ty {
border: 2px solid red;
}
</style>
<body>
<label>这是一个label:</label>
<input type="text" class="ty"/>
</body>
3.7 境界半径プロパティ
border-radius属性は、変更された境界線の「丸み」です。つまり、要素に丸い境界線を追加します。構文は次のとおりです: border-radius: size;たとえば、境界線を 10px の丸い境界線に設定します。
<style>
.ty {
border-radius: 10px;
}
</style>
<body>
<label>这是一个label:</label>
<input type="text" class="ty"/>
</body> 効果は次のとおりです。
3.8 text-align プロパティ
text-align属性は、テキストの配置を指定するために使用されます。配置方法には、左揃え、中央揃え、および右揃えがあります。左揃えがデフォルトの配置です。
中央揃え:
<style>
.test {
text-align: center;
}
</style>
<body>
<h1 class="test">这是一个标题</h1>
</body>効果は次のとおりです。
右揃え:
<style>
.test {
text-align: right;
}
</style>
<body>
<h1 class="test">这是一个标题</h1>
</body> 結果を示す：
4、ドム
4.1 id に基づいて要素を取得する
次のコードに示すように、 document.getElementById はidに基づいて要素を取得します
<body>
<div>
<label>Number:</label>
<input type="text" id="num1"/>
</div>
<div>
<button id="but">按钮</button>
</div>
<script>
document.getElementById('but').onclick = function() {
let num = document.getElementById('num1').value;
console.log(num);
}
</script>
</body>55 を入力してボタンをクリックすると、コンソールは 55 を出力します。
したがって、上記のコードで document.getElementById の後に.onclick を追加することは、ボタンをクリックして対応する操作を実行することを意味し、.valueを追加することは、id に対応する値を取得することを意味します。
4.2 名前で要素を取得する
document.getElementByNameは名前に基づいて要素を取得します
<body>
<p>请选择你的兴趣爱好(多选):</p>
<input type="checkbox" name="sports" value="拳击"/>拳击
<input type="checkbox" name="sports" value="柔术"/>柔术
<input type="checkbox" name="sports" value="摔跤"/>摔跤
<input type="checkbox" name="sports" value="散打"/>散打
<script>
var sports = document.getElementsByName('sports');
console.log(sports[0]);
console.log(sports[1]);
</script>
</body>上記のコードでは、document.getElementsByName('sports') を使用して boxing と jujitsu の 2 つのフォーム要素を取得します。
4.3 クラス名で要素を取得する
document.getElementByClassNameは、クラスに従って要素を取得することです
<body>
<div>
<p class="person1">阿珍</p>
<p class="person2">阿强</p>
</div>
<script>
let person1 = document.getElementsByClassName('person1');
console.log(person1[0]);
</script>
</body>
4.4 CSS セレクターに基づいて要素を取得する
document.querySelector は、次のコードのように、 css セレクターに従って要素を取得します
<body>
<div class="mma">拳击</div>
<div class="mma">柔术</div>
<div class="mma">摔跤</div>
<script>
//第一个div
let firstdiv = document.querySelector('.mma');
console.log(firstdiv);
//所有的div
let alldiv = document.querySelectorAll('.mma');
console.log(alldiv);
</script>
</body>
このブログ記事では、主に HTML の一部のフォームと CSS 属性と JS の DOM について説明し、各ナレッジ ポイントの実装効果と使用法について詳細に説明します。いくつかのページを実装して初めて、この知識ポイントと特定の効果を達成する方法を理解することができます。また、ページ効果を実現できていない知識ポイントも記事内に多数掲載されていますので、実際に試してみて、これらの知識ポイントの実現効果を実感してみてください。
このブログはここまでです、読んでいただきありがとうございます。何かを得た場合は、ブロガーに少し注意を払ってください。また次回お会いしましょう。