CCF 201403-2 視窗 C語言程式碼（90分）
阿新 • • 發佈：2021-02-10
技術標籤：jsjavascripthtmlcsswxpython
練習6-1：對輸入的字串進行加密和解密。
HTML程式碼
<input type="text" id="input1"> <input type="button" name="btn1" id="btn1" value="加密" /> <div id="div1"> </div> <input type="button" name="btn1" id="btn2" value="解密" /> <div id="div2"> </div>
CSS程式碼
#div1,#div2{
width: 300px;
height: 200px;
border: 1px solid black;
}
JavaScipt程式碼
/*程式的順序
1.獲取btn1的物件
2.繫結事件
3.獲取input1的值
4.遍歷獲取每一位上字元的編碼，並加上10+i
5.轉換成新的字串
6.顯示在div1中
*/
//加密 獲取點選事件btn1
var btn = document.getElementById("btn1");
btn.onclick = function() {
//得到輸入框的值
var str = document.getElementById(”input1").value;
//定義一個空串
var str2 = " ";
//遍歷輸入的字串中的每一個字元
for (var i=0; i<str.length; i++) {
//字元轉換成編碼 並且加密
var code = str.charCodeAt(i) + 20 + i*i;
//編碼轉換成字元
var s = String.fromCharCode(code);
//將每個字串進行拼接
str2+=s;
}
//獲取輸出框
var dd = document.getElementById("div1");
//將str2的值輸出到dd框中
dd.innerHTML = str2;
};
//解密
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
var str = document.getElementById("div1").innerHTML;
var str2 = "";
for (var i=0; i<str.length; i++) {
//字元轉換成編碼
var code = str.charCodeAt(i)-20-(i*i);
//編碼轉換成字元
var s = String.fromCharCode(code);
str2 += s;
}
var dd = document.getElementById("div2");
dd.innerHTML = str2;
};
練習6-2：點選按鈕新增有規律的顏色模組
HTML程式碼
<input type="button" value="自動生成10li" id="btn1" />
<ul id="u1"></ul>
CSS程式碼
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul>li {
border: 1px solid black;
width: 50px;
height: 50px;
text-align: center;
//行高設定成高度 可以居中文字
line-height: 50px;
//使li模組左浮動
float: left;
margin: 5px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow ;
}
.blue {
background-color: blue ;
}
.green {
background-color: green ;
}
JavaScript程式碼
var btn = document.getElementById("btn1");
btn.onclick = function() {
//獲取ul塊的物件
var ul = document.getElementById("u1");
//準備建立10個li 依次進行遍歷
for(var i=0; i<10; i++) {
var li = document.createElement("li");
//對每個li中追加內容 i
li.innerHTML = i;
//當索引求餘為4的塊 將該類的類名賦值成red 後面同理
if(i%4==0) {
li.className = "red";
}else if(i%4==1) {
li.className = "yellow";
}else if(i%4==2) {
li.className = "blue";
}else if(i%4==3) {
li.className = "green";
}
//沒生成一個li都要追加進父元素的ul中
ul.appendChild(li);
}
};
練習6-3：點選按鈕自動顯示V形
HTML程式碼
<input type="button" id="btn1" value="自動生成v字形" />
<div id="div1"></div>
CSS程式碼
#div1 {
position: relative;
}
//這是將要建立的div 設定的樣式
#div>div {
text-align: center;
line-height: 50px;
font-size: 30px;
font-weight: bold;
}
JavaScirpt程式碼
var btn = document.getElementById("btn1");
btn.onclick=function(){
var dd = document.getElementById("div1");
//建立5個新的div塊
for(var i=0; i<5; i++) {
var obj = document.createElement("div");
obj.style.position = "absolute";
obj.style.width="50px";
obj.style.height="50px";
obj.style.backgroundColor = "red";
obj.style.color = "white";
obj.style.left = (i*50) + "px";
//v字形 top的值 會有起伏 先是增加 等於2時會慢慢減少
if(i<=2) {
obj.style.top = (i*50) + "px";
}else {
obj.style.top = ((4-i)*50) + "px";
}
//給每個塊新增內容
obj.innerHTML = i;
dd.appendChild(obj);
}
};
練習6-4：每次點選背景顏色都會變化
HTML程式碼
<ul>
<li>sadfafiewqjjflasdissdgfaf我撒打發斯蒂芬</li>
<li>大家來看決勝巔峰表卡了事發後為愛發聲課件擦拭的</li>
<li>愛上了的機房裡看書的浪費你老師傅阿斯頓發順豐我和符合</li>
<li>阿道夫灑散發發的說法是的發放</li>
<li>沙發大事發生的發生發生法師打發發生 礙事法師打發撒旦法</li>
<li>阿打斯蒂芬大沙發沙發上發大水發的說法十點多發的是</li>
</ul>
JavaScript程式碼
//取到所有li 放進集合中
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++) {
lis[i].onclik = function() {
//如果背景綠色 點選後則變為白色
if(this.style.backgroundColor = "green") {
this.style.backgroundColor = "white";
}else {
//如果背景是白色 點選後變為綠色
this.style.backgroundColor = "green";
}
};
}
練習6-5：滑鼠浮動事件，移上、移出變換顏色
HTML程式碼
<ul>
<li>你哈你哈你哈你哈你哈你哈你哈</li>
<li>大家真的好家好才是真的好</li>
<li>熱熱熱熱熱熱熱熱熱熱熱熱熱熱熱</li>
<li>熱熱熱熱熱熱熱熱熱熱熱</li>
<li>熱熱法</li>
<li>阿熱熱大沙的是</li>
</ul>
JavaScript程式碼
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++) {
//滑鼠懸停事件
lis[i].onmouseover = function() {
this.style.backgroundColor = "gray";
};
//滑鼠離開事件
lis[i].onmouseout = function() {
this.style.backgroundColor = "";
};
}
練習6-6： 點選塊出現隨機顏色塊
HTML程式碼
<div id="dd"></div>
CSS程式碼
#dd{
width: 200px;
height: 200px;
border: 1px solid red;
margin-top: 200px;
margin-left: 200px;
}
JavaScript程式碼
var div = document.getElementById("dd");
div.onclick = function() {
//使用到數學物件中的隨機函式
//js中的隨機數Math.random(),只能產生【0~1)
//js中四捨五入Math.round(值)，四捨五入
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);;
//取到rgb的各個值
this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
};
點選塊會導致方塊變成隨機的顏色
