8:42 PM როგორ ავუხსნათ სიყვარული პროგრამულად | |
| უსიყვარულოდ მზე არ სუფევს ცის კამარაზე… მართალია, მაგრამ, იცით რა? – ბოლომდე თუ გავუხსნით გულს საყვარელ ადამიანს, მას ერთგვარ ინტერესს გავუქრობთ. ამიტომ დღეს ჩვენ განსაკუთრებულად ორიგინალურები ვიქნებით :). იხილეთ აპლიკაცია დავიწყოთ ინდექს გვერდის შექმნით. გავხსნათ ახალი ფაილი და შევინახოთ როგორც index.html. ინდექს გვერდზე რამოდენიმე Div ელემენტს შევქმნით, რომლებსაც id ატრიბუტით აღვნიშნავთ, რათა შემდეგ jQuery-ითა და CSS-ით ვმართოთ ისინი. ბოლოში HTML5 ტექნოლოგიით დავუკრავთ მუსიკას. ?1 2 3 4 5 6 7 8 9 10 11 12 13 14 <title> I Love You</title> <link rel="stylesheet" type="text/css" href="style.css" media="screen"> <div id="container"> <div id="love"></div> </div> <div id="footer"> </div> <audio autoplay="true"><source src="sadpiano.ogg" type="audio/ogg"></source><source src="sadpiano.mp3" type="audio/mpeg"></source></audio> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="love.js"> </script> შემდეგი ეტაპი ჯავასკრიპტია. გავხსნათ ახალი ფაილი და შევინახოთ იგი როგორც love.js. ჩვენი განზრახვაა ისე დავწეროთ კოდი, რომ შევქმნათ ერთგვარი ბეჭდვის ეფექტი. ამის გასაკეთებლად კი სიმბოლოები უნდა გამოვაჩინოთ შემთხვევითი ინტერვალების შემდეგ Math.random() ფუნქციის დახმარებით. ტექსტში შემავალ თითოეულ სიმბოლოს დავლუპავთ. ბოლოში კი გამოვიძახებთ ჩვენს მიერ შემნილ ფუნქცია type()-ს. ?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var text = "I Love Yo....ghurt with strawberry :)"; var count = 0; var maxspeed = 1000; $(document).ready(function(){ function character(start, end, text){ return text.substring(start, end); } function type(){ var random = Math.floor(Math.random() * maxspeed); setTimeout(type, random); $('#love').append(character(count, count+1, text)); count++; } type(); }); პროგრამულად რაც არ უნდა გამართული იყოს აპლიკაცია, მიმზიდველი ვერ იქნება თუ ლამაზ ინტერფეისს არ შევუქმნით. ინტერფეისის შესაქმნელად კი ვებ-პროგრამისტები CSS-ს ვიყენებთ. შევქმნათ ახალი ფაილი, შევინახოთ როგორც style.css და დავიწყოთ ჩვენი აპლიკაციის ოდნავ შელამაზება. ?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 body{ background: url(bg.png); } #container{width:800px; margin: 0 auto;} #love{ font-family: "Comic Sans MS"; font-size: 70px; color: #b6b6b6; text-shadow: 3px 3px 3px #000; -moz-text-shadow: 3px 3px 3px #000; -webkit-text-shadow: 3px 3px 3px #000; margin-top:100px; } #footer{width:1000px; height:287px; margin: 0 auto; background: url(images/spring.png) no-repeat}; | |
|
| |