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>

HTML+JavaScript+CSS做一个界面的更多相关文章

【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
CSS做一个Switch开关
本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...
js/html/css做一个简单的图片自动（auto）轮播效果//带注释
FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...
C/C++编程笔记：编写完成了一个C/C++程序，如何做一个界面出来？
最简单的方法是用vc6新建一个Win32 Application空工程,然后添加一个cpp文件,输入 (注意添加对话框资源,并且在对话框上添加一个文本框) #include #include &quo ...
如何用css做一个细虚线边框表格
<style type="text/css"> <!-- .dashed_tbl { border-top: 1px dashed #333333; border ...
项目实践2:(问卷)用html和css做一个网页
好家伙,又来写项目了 1.以下是考题,姑且把他理解为甲方吧. 2.以下是附带的题目素材开干.
纯CSS做3D旋转魔方
昨天偶然看见网友(简单说用CSS做一个魔方旋转的效果)做的一个3D旋转魔方效果就是本博客右侧公告栏所示在这里把做法展现出来感兴趣的可以试试做成自己特有的魔方 <!DOCTYPE h ...
用bootstrap做一个背景可轮转的登录界面
用bootstrap做一个背景可轮转的登录界面一.总结一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

随机推荐

uniapp colorui的使用
1.首先我们在Hbuilder x中新建一个uniapp的项目,如下图所示,选择 colorUI项目 2.copy 项目文件夹下的colorUI文件夹到你的项目中去,如下图所示 3.打开根目录下的Ap ...
MySQL 导出一条数据的插入语句
1.MySQL 导出一条数据的插入语句的方法在MySQL中,如果我们想要导出一条数据的插入语句,我们可以使用SELECT ... INTO OUTFILE语句(但这通常用于将整个表或查询结果导出到一 ...
jquery浏览器的上卷高度节点的创建和写入节点的删除
// js 的兼容语法 // let scrollT = document.documentElement.scrollTop || document.body.scrollTop; ...
剑指Offer-57.二叉树的下一个结点(C++/Java)
题目: 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 分析: 二叉树的中序遍历是左根右,所以如果一个结点的右子 ...
kettle从入门到精通第五十五课 ETL之kettle Excel输入
1. Excel输入,Microsoft Excel输入步骤的作用是从Microsoft Excel中读取数据,如下图所示: 1)Excel输入步骤从文件D:\data\测试数据.xlsx读取数据. ...
shell基础概述
1.0 编程的目的计算机的发明,是为了用机器取代/解放人力,而编程的目的则是将人类的思想流程按照某种能够被计算机识别的表达方式传递给计算机,从而达到让计算机能够像人脑/电脑一样自动执行的效果. 编程 ...
【Java异常】Variable used in lambda expression should be final or effectively final
[Java异常]Variable used in lambda expression should be final or effectively final 从字面上来理解这句话,意思是:*lamb ...
sqlyog 工具查看历史记录
sqlyog 工具查看历史记录可以查看当前客户端的执行脚本的情况
FTP传输PORT、PASV模式
FTP FTP是File Transfer Protocol(文件传输协议)的缩写,用来在两台计算机之间互相传送文件.相比于HTTP,FTP协议要复杂得多.复杂的原因,是因为FTP协议要用到两个TCP ...
RIP总结
RIP 两种更新方式:定期更新和触发更新管理距离为120,更新使用UDP520,更新周期30s,使用跳数作为度量值,最大15 RIP有三个版本RIPv1,RIPv2,RIPn ...

HTML+JavaScript+CSS做一个界面

HTML+JavaScript+CSS做一个界面的更多相关文章

随机推荐

热门专题