HTML+JavaScript+CSS做一个界面

　　下面是一个web界面主要是前端没有后端功能：关于JavaScript几种比较常见的样式

Javaweb(1),html

<!DOCTYPE html>

<head>

<title>Document</title>

进入页面加载的方法

window.onload=function()

{

var date=new Date(),time=date.getTime();

setInterval(function() {set(time);time = Number(time);time += 1000;},1000);

setTodayDate(date);

}

设置日期的方法，针对年月日星期的显示

function setTodayDate(today)

{

var years,months,dates,weeks, intYears,intMonths,intDates,intWeeks,today,timeString;

intYears = today.getFullYear();//获得年

intMonths = today.getMonth() + 1;//获得月份+1

intDates = today.getDate();//获得天数

intWeeks = today.getDay();//获得星期

years = intYears + '年 ';

if(intMonths < 10){

months = '0' + intMonths + '月';

}else{

months = intMonths + '月';

}

if(intDates < 10){

dates = '0' + intDates + '日 ';

}else{

dates = intDates + '日 ';

}

var weekArray = new Array(7);

weekArray[0] = '星期日';

weekArray[1] = '星期一';

weekArray[2] = '星期二';

weekArray[3] = '星期三';

weekArray[4] = '星期四';

weekArray[5] = '星期五';

weekArray[6] = '星期六';

weeks =weekArray[intWeeks] + ' ';

timeString = years + months + dates + weeks;

document.getElementById('time').innerHTML=timeString;

}

设置北京时间的方法，针对时分秒的显示

function set(time)

{

var beijingTimeZone = 8;

var timeOffset = ((-1 * (new Date()).getTimezoneOffset()) - (beijingTimeZone * 60)) * 60000;

var now = new Date(time - timeOffset);

document.getElementById('bjtime').innerHTML = p(now.getHours())+':'+p(now.getMinutes())+':'+p(now.getSeconds());

}

格式化时间的显示方式

function p(s)

{

return s < 10 ? '0' + s : s;

}

</script>

#main-top{

width: 100%;

height: 150px;

}

#main-right{

width: 30%;

height: 950px;

float: left;

text-align: center;

/* background-color: aquamarine; */

}

#main-middle

{

float:left;

width: 70%;

height: 950px;

/* background-color: antiquewhite; */

}

#main-footer

{

width: 100%;

clear:both;/*清除左右浮动*/

margin-top:20px;

position:relative;/*避免底部留白*/

height: auto;

}

body

{

background-image: url(back.png);

}

#topnav{

width: 100%;

overflow: hidden;

background-color: white;

border: 1px solid black;

border-radius: 10px;

opacity: 0.4;

text-align: center;

}

#footer{

width: 100%;

overflow: hidden;

border-radius: 10px;

text-align: center;

}

font-size: 40px;

color: black;

text-decoration: none;

}

.afooter

{

font-size: 30px;

color:teal ;

font-weight: bold;

text-decoration: none;

}

h1{

font-size: 60px;

text-align: center;

}

ul{

background-color: white;

padding-left: 70px;

opacity: 0.4;

text-align: left;

font-size:40px ;

text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

list-style-type: none;

border: 1px solid white;

border-radius: 10px;

}

.a-left{

font-size: 35px ;

}

#photo{

height: 50px;

width: 50px;

}

#photo1{

height: 300px;

width: 300px;

opacity: 0.9;

border-radius: 20px;

}

.li-k{

font-size: 30px;

text-align: center;

}

.left-ul

{

background-color: white;

padding-left: 70px;

opacity: 0.4;

font-size:40px ;

width: auto;

text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

list-style-type: none;

border: 1px solid white;

border-radius: 10px;

}

.left-ul1

{

background-color: white;

padding-left: 70px;

opacity: 0.4;

font-size:30px ;

width: auto;

text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

list-style-type: none;

border: 1px solid white;

border-radius: 10px;

}

</style>

</head>

<body>

</div>

</div>

<br>

<br>

记得留言那:

</h1>

<div>

</div>

<a href="#"class="afooter">石家庄铁道大学      信息科学与技术学院      622宿舍著emm</a>

</div>

</body>

</html>

Javweb(1.1).html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<tr>

</tr>

<tr>

<td style="width: 50%">国籍：中华人民共和国</td>

<td style="width: 50%">出生地：山东省菏泽市</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<p>江银涛于2002年9月21日出生于山东省菏泽市单县人民医院，2014年毕业天于孝义市第九中学，2017年毕业于孝义市第二中学，2020年进入了石家庄铁道大学，正式步入了自己的大学生涯。</p>

<p>由于自小身体状态不好在小学时期报名了跆拳道这一项目。训练时间长达4年，并在之中参加多次市级省级比赛并取得不错的成绩。</p>

<p>对于军旅生涯非常期望的，对于每一次军训都是十分的刻苦认真。长空砺剑洒热血，万里云天祭忠魂。</p>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

javawebwork（1.3）.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr> <td><p>以下内容纯属瞎造：</p>

<p> 布克奖是英国最重要的文学奖项，享有很高的声誉。这一奖项每年颁发给在过去12个月中出版杰出小说的作者。</p>

该奖项成立于1993年，由约翰·S·科恩基金会和英国艺术委员会共同颁发。这个奖项只授予英国文学，是一个非常著名的奖项。</br>

3、普利策奖</br>

普利策奖设立于1917年，由哥伦比亚大学颁发。该奖项每年在美国颁发，以表彰在写作、新闻和音乐方面的成就，它们以出版商约瑟夫·普利策的名字命名。

</br>

4、Ashok Chakra</br>

它是和平时期的军事装饰，用来奖励勇敢、勇敢或自我牺牲的行为。这是印度和平时期颁发给士兵、陆军、空军、陆军、海军和许多其他合法部队的最高奖项之一。

</br>

5、国际笔会奖

</br>

国际笔会奖于1921年在伦敦成立，由非政府组织国际笔会颁发，这个奖是世界上最古老的国际文学组织的荣誉，国际笔会有不同类型的奖项。

</br>

6、金棕榈奖

</br>

金棕榈奖成立于1955年，旨在表彰电影导演。很多颁奖典礼都是为电影明星举办的，但导演却不多，所以这是一个非常有声望的奖项。

</br>

7、拉蒙·麦格塞塞奖

</br>

拉蒙·麦格塞塞奖成立于1957年，由菲律宾颁发给已故总统拉蒙·麦格塞塞。这个奖项是授予在文学、公共服务、创意艺术、社区领导。

</br>

8、奥斯卡金像奖

</br>

奥斯卡金像奖是在1929年设立的，由电影学院和艺术与科学学院共同颁发。这是一个世界知名的电影奖项，旨在鼓励优秀电影的创作与发展。

</br>

9、卡林加奖

</br>

卡林加奖于1951年创立，该奖项由印度政府教科文组织颁发，以表彰科学的传播和普及。联合国教科文组织在每年的世界科学日上颁发这一奖项。

</br>

10、诺贝尔奖

</br>

诺贝尔奖于1901年设立，以科学家、瑞典工程师阿尔弗雷德·诺贝尔命名，诺贝尔奖是一项伟大的成就，也是在医药、和平、科学和经济领域上最令人尊敬和最有声望的奖项。

</td></tr> </table>

</div>

</div> </body>

</html>

posted @ 2022-03-31 21:32 O_O似曾相识阅读(206) 评论(0) 编辑收藏举报

刷新页面返回顶部

念17836527558

HTML+JavaScript+CSS做一个界面

公告